.block-featured-content-stacked{ @apply py-sm xl:py-base bg-black text-white /*mt-md xl:mt-lg*/; p{ @apply text-white; } &__inner{ .block-featured-content-stacked__img{ @apply aspect-[3/2] lg:aspect-[2/1] xl:aspect-[21/9]; img{ @apply w-full h-full object-cover; } } .block-paragraph{ @apply mt-8.75 lg:w-11/12; p{ @apply text-size-md-lg mb-0; } } } } .block-featured-content-columns{ @apply py-sm xl:py-base bg-black text-white /*mt-md xl:mt-lg*/; p{ @apply text-white; } &__inner{ @apply lg:grid grid-cols-2 gap-x-[calc(var(--grid-gutter)*2)]; .block-featured-content-columns__img{ @apply lg:order-2 aspect-[3/2] mb-sm lg:mb-0; img{ @apply w-full h-full object-cover; } } .block-featured-content-columns__content{ @apply lg:order-1 flex flex-col; .block-title{ } .block-paragraph{ @apply mb-sm md:mb-md self-end; p{ @apply text-size-md mb-0; } } .block-link{ @apply lg:self-end; } } } } .block-featured-content-cover{ @apply aspect-video relative mb-8.75; &__content{ @apply aspect-square max-w-[25vw] absolute z-10 right-5 bottom-5 bg-white text-black py-4 px-3 flex flex-col justify-between ; p{ @apply text-size-lg font-bold; } a{ @apply text-grey-300 block; } } &__img{ @apply w-full h-full; img{ @apply w-full h-full object-cover; } } } .block-featured-tabs{ @apply py-sm md:py-base lg:pt-0 bg-black text-white; &__tabs{ @apply flex pb-sm md:pb-base lg:pb-0 text-size-lg lg:translate-y-[100%]; button{ @apply block text-grey-300; &:not(:first-child){ @apply ml-2; } &.is-selected{ @apply text-white; } } } &-tab{ @apply hidden; > div{ @apply lg:grid grid-cols-2 gap-x-[calc(var(--grid-gutter)*2)]; } .block-featured-tabs-tab__content{ @apply lg:order-1 lg:self-end; p{ @apply text-white mb-0 text-size-md text-size-md; } } .block-featured-tabs-tab__img{ @apply lg:order-2 mb-sm md:mb-base lg:mb-0 aspect-[3/2]; img{ @apply w-full h-full object-cover; } } } }