.asset-display { display: flex; flex: 1 0 auto; flex-direction: column; justify-content: center; background: #F6F6F6; width: 100%; position: relative; &:before, &:after { content: ''; position: absolute; box-shadow: inset 0 1px 2px 2px rgba(169, 173, 186, 0.2); width: 100%; height: 1px; background: transparent; left: 0; top: 0; } &:after { top: auto; bottom: 0; } } .asset-title { margin-top: 40px; font-weight: normal; font-size: 26px; color: #2E2F31; letter-spacing: 0; text-align: center; line-height: 32px; } .asset-image, .asset-video { margin: 60px auto; max-width: 60vh; max-height: 100%; object-fit: contain; object-position: center; } .asset-video { border: 1px solid #d0d0d0; margin: 16px; padding: 6px; } // .vertical-split .asset-display { // height: 90vh; // } .visible-content { width: 100%; margin: 0; padding-bottom: 30px; box-shadow: 0 1px 3px 2px rgba(169, 173, 186, 0.2); &.closed { box-shadow: none; } } .asset-information-wrap { max-width: 800px; .horizontal-split { justify-content: center; .column { padding-top: 40px; &:first-child { padding-right: 40px; margin-right: -1px; border-right: 1px solid $grey-alt; } &:last-child { padding-left: 60px; border-left: 1px solid $grey-alt; } } } p.asset-description { white-space: pre-line; font-size: 14px; color: #2E2F31; letter-spacing: 0; line-height: 18px; width: 360px; padding-bottom: 80px; @media (max-width: $break-point-medium) { padding-bottom: 60px; } } .asset-information { width: 320px; } } .asset-footer { padding-top: 30px; border-top: 1px solid $grey-alt; padding-bottom: 80px; @media (max-width: $break-point-medium) { padding-bottom: 60px; } }