.photogrid {
    display: grid;
    grid-template-columns: auto 900px auto;
    row-gap: 80px;
    grid-template-areas:
        ". photointro ."
        ". photo-3 ."
        ". photo-2 ."
        ". photo-1 ."
        ". photo-4 ."
        ". photo-5 ."
        ". photo-6 .";
}

.photointro {
    grid-area: photointro;
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: 700;
    color: black;
}

.photointro h1 {
    font-size: 6rem;
    font-style: italic;
}

.photo {
    background-color: white;
    -webkit-box-shadow: 6px 8px 12px 12px rgba(8,33,0,0.96); 
    box-shadow: 6px 8px 12px 12px rgba(8,33,0,0.96);
    padding: 10px;
    height: 515px;
}

.photo-1 {
    grid-area: photo-1;
    transform: rotate(2deg);
}

.photo-2 {
    grid-area: photo-2;
    transform: rotate(-1deg);
}

.photo-3 {
    grid-area: photo-3;
    transform: rotate(1.5deg);
}

.photo-4 {
    grid-area: photo-4;
    transform: rotate(-1deg);
}

.photo-5 {
    grid-area: photo-5;
    transform: rotate(2deg);
}

.photo-6 {
    grid-area: photo-6;
    transform: rotate(-1deg);
}

/* ******************************************************************************* */
/* Responsive Regeln
/* ******************************************************************************* */

@media screen and (max-width: 1080px){

    .photogrid {
        grid-template-columns: auto 600px auto;
        row-gap: 80px;
    }

    .photointro h1 {
        font-size: 4rem;
    }

    .photo {
        font-size: 1.5rem;
        padding: 10px;
        height: 348px;
    }
}

@media screen and (max-width: 780px){

    .photogrid {
        display: grid;
        grid-template-columns: auto 320px auto;
        row-gap: 60px;
    }
    .photointro h1 {
        font-size: 2.5rem;
    }

    .photo {
        font-size: 1.5rem;
        padding: 6px;
        height: 185px;
    }
}