.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 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;
            }
            &:hover{
                @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;
            }
            > *{
                &: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;
            }
        }
    }
}