/*
 * This file is part of the Sylius package.
 *
 * (c) Sylius Sp. z o.o.
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

.photo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
}

.photo-grid .photo-grid-item-1 {
    grid-area: 2 / 1 / 4 / 5;
}

.photo-grid .photo-grid-item-2 {
    grid-area: 1 / 1 / 2 / 5;

    img {
        aspect-ratio: 4/3;
    }
}

.photo-grid .photo-grid-item-3 {
    grid-area: 4 / 1 / 5 / 5;

    img {
        aspect-ratio: 4/3;
    }
}

@include media-breakpoint-up(md) {
    .photo-grid .photo-grid-item-1 {
        grid-area: 1 / 1 / 5 / 3;
    }

    .photo-grid .photo-grid-item-2 {
        grid-area: 1 / 3 / 3 / 5;
    }

    .photo-grid .photo-grid-item-3 {
        grid-area: 3 / 3 / 5 / 5;
    }
}