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