img {
    display: block;
    max-width: 100%;
    height: auto;
}
.galerie {
    display: grid;
    width: 1300px;
    height: 1200px;
    max-height: 1200px;
    grid-template-columns: 33% auto;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 1rem;
    background-color: var(--gray-light);
}

.galerie > div {
    box-shadow: var(--box-shadow);
    border-radius: var(--border-radius);
}

.main {
    grid-column: 2;
    grid-row: 1 / 3;
    background-image: url('./../images/main.jpg');
    position: relative;
}

.left1 {
    grid-column: 1;
    grid-row: 1 / 2;
    background-image: url('./../images/left1.jpg');
}
.left2 {
    grid-column: 1;
    grid-row: 2 / 3;
    background-image: url('./../images/left2.jpg');
}

.left3 {
    grid-column: 1;
    grid-row: 3;
    background-image: url('./../images/left3.jpg');
}

.bottom1 {
    grid-column: 2;
    grid-row: 3;
    background-image: url('./../images/bottom1.jpg');
}

.galerie-item {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.main div {
    font-size: 2rem;
    position: absolute;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    width: 90%;
}

.main div h3,
h4 {
    color: whitesmoke;
    font-style: oblique;
    letter-spacing: 3px;
    opacity: 0.95;
}

@media (max-width: 1350px) {
    .galerie {
        display: grid;
        width: auto;
        grid-template-columns: 95vw;
        grid-template-rows: repeat(5, 400px);
        gap: 1rem;
        background-color: var(--gray-light);
    }

    h4 {
        font-size: 2rem;
    }

    .main {
        grid-column: 1;
        grid-row: 1;
        background-image: url('./../images/main.jpg');
        position: relative;
    }

    .left1 {
        grid-column: 1;
        grid-row: 2 / 3;
        background-image: url('./../images/left1.jpg');
    }
    .left2 {
        grid-column: 1;
        grid-row: 3 / 4;
        background-image: url('./../images/left2.jpg');
    }

    .left3 {
        grid-column: 1;
        grid-row: 4/5;
        background-image: url('./../images/left3.jpg');
    }

    .bottom1 {
        grid-column: 1;
        grid-row: 5 / 5;
        background-image: url('./../images/bottom1.jpg');
    }
}