Newer
Older
pre-www / src / assets / css / blocks / images-grid.css
@EcosistemaWebIuav EcosistemaWebIuav on 16 Apr 1 KB fix: responsive images-grid, margini card
.block-images-grid{
    @apply mb-base md:mb-lg;
    &--black{
        @apply bg-black py-base lg:py-md;
    }
    &__inner{
        @apply grid grid-cols-12 grid-rows-4 lg:grid-rows-2 gap-[calc(var(--grid-gutter)*2)];
        > div{
            @apply relative;
            &:first-child{
                grid-area: 1 / 1 / 3 / 13;
                @screen lg{
                    grid-area: 1 / 1 / 4 / 7;
                }
                @apply aspect-[4/3] lg:aspect-[4/5];
            }
            &:nth-child(2){
                grid-area: 3 / 1 / 4 / 7;
                @screen lg{
                    grid-area: 1 / 7 / 2 / 10;
                }
            }
            &:nth-child(3){
                grid-area: 3 / 7 / 4 / 13;
                @screen lg{
                    grid-area: 1 / 10 / 2 / 13;
                }
            }
            &:nth-child(4){
                grid-area: 4 / 1 / 5 / 7;
                @screen lg{
                    grid-area: 2 / 7 / 4 / 10;
                }
            }
            &:nth-child(5){
                grid-area: 4 / 7 / 5 / 13;
                @screen lg{
                    grid-area: 2 / 10 / 4 / 13;
                }
            }
            img{
                @apply absolute top-0 left-0 w-full h-full object-cover;
            }
        }
    }
}