.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; } } } }