$COLLAPSED_HEIGHT: 120px; .expandable--closed, .expandable--open { margin-bottom: var(--spacing-s); } .expandable--closed { max-height: $COLLAPSED_HEIGHT * calc(3 / 4); overflow-y: hidden; position: relative; -webkit-mask-image: -webkit-gradient(linear, left 30%, left bottom, from(rgba(0, 0, 0, 1)), to(rgba(0, 0, 0, 0))); } .expandable--open { max-height: 100%; }