.block-featured-content-stacked{ @apply mb-base md:mb-lg py-sm xl:py-base bg-black text-white /*mt-md xl:mt-lg*/; &:has(+ .contacts-section){ @apply mb-0; } 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-title{ &__inner{ a{ @apply text-grey-400; &:hover{ @apply text-white; } } } } .block-paragraph{ @apply mt-8.75 lg:w-11/12; @apply mb-0 !important; p{ @apply text-size-md-lg mb-0; } } } } .block-featured-content-columns{ @apply mb-base md:mb-lg py-sm xl:py-base bg-black text-white /*mt-md xl:mt-lg*/; &:has(+ .contacts-section){ @apply mb-0; } 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; &:hover{ @apply bg-white text-black; &::before{ background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m34.711 24-6.778-7.32 1.467-1.36L38.363 25 29.4 34.68l-1.467-1.36L34.71 26H12v-2h22.711Z' fill='%23000'/%3E%3C/svg%3E"); } } &[href]:not(:where( /* exclude hash only links */ [href^="#"], /* exclude relative but not double slash only links */ [href^="/"]:not([href^="//"]), )){ &:hover{ &::before{ background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M31.0124 17.0725L21.043 16.6891L21.1198 14.6906L34.3016 15.1975L34.8086 28.3793L32.81 28.4562L32.4266 18.4867L16.3673 34.546L14.9531 33.1318L31.0124 17.0725Z' fill='black'/%3E%3C/svg%3E%0A"); } } } } } } } .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 bg-black text-white relative; [data-tabs-container]{ @apply relative; } &__tabs{ @apply lg:absolute lg:top-0 flex flex-wrap lg:w-1/2 pb-sm md:pb-base text-size-lg; button{ @apply block text-grey-300; &:not(:last-child){ @apply mr-2; } &.is-selected{ @apply text-white; } &:hover{ @apply text-white; } } } &-tab{ @apply hidden h-full; > div{ @apply h-full 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; } > *{ &:last-child{ @apply mb-0; } } } .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; } } } }