Newer
Older
pre-www / src / assets / css / blocks / featured-content.css
.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;
            }
        }
    }
}