@use "../common/utils" as *;
@use "../common/mixins" as *;

.gallery-3-images {
    padding-block: calc-rem(20px);

    @include media-breakpoint-up(md) {
        padding-block: calc-rem(40px);
    }

    &__grid {
        display: grid;
        gap: calc-rem(10px);

        @include media-breakpoint-up(lg) {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            gap: calc-rem(30px);
        }

        img {
            width: 100%;
            object-fit: cover;
            border-radius: var(--border-radius);
            height: 100%;
            display: block;
            aspect-ratio: aspect-ratio(595, 283);


            &:first-child {
                @include media-breakpoint-up(lg) {
                    aspect-ratio: aspect-ratio(595, 283);
                    grid-row: 1;
                    grid-column: 1;
                }
            }

            &:nth-child(2) {
                @include media-breakpoint-up(lg) {
                    aspect-ratio: aspect-ratio(595, 283);
                    grid-row: 2;
                    grid-column: 1;
                }
            }

            &:nth-child(3) {
                @include media-breakpoint-up(lg) {
                    aspect-ratio: unset;
                    grid-row: span 2;
                    grid-column: 2;
                }
            }
        }
    }
}
