/* courier-prime-regular - latin-ext_latin */
@font-face {
    font-family: 'Courier Prime';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/courier-prime-v2-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
       url('fonts/courier-prime-v2-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/courier-prime-v2-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/courier-prime-v2-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/courier-prime-v2-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/courier-prime-v2-latin-ext_latin-regular.svg#CourierPrime') format('svg'); /* Legacy iOS */
}

/* courier-prime-italic - latin-ext_latin */
@font-face {
    font-family: 'Courier Prime';
    font-style: italic;
    font-weight: 400;
    src: url('fonts/courier-prime-v2-latin-ext_latin-italic.eot'); /* IE9 Compat Modes */
    src: local(''),
       url('fonts/courier-prime-v2-latin-ext_latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/courier-prime-v2-latin-ext_latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/courier-prime-v2-latin-ext_latin-italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/courier-prime-v2-latin-ext_latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/courier-prime-v2-latin-ext_latin-italic.svg#CourierPrime') format('svg'); /* Legacy iOS */
}

/* courier-prime-700 - latin-ext_latin */
@font-face {
    font-family: 'Courier Prime';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/courier-prime-v2-latin-ext_latin-700.eot'); /* IE9 Compat Modes */
    src: local(''),
       url('fonts/courier-prime-v2-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/courier-prime-v2-latin-ext_latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/courier-prime-v2-latin-ext_latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/courier-prime-v2-latin-ext_latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/courier-prime-v2-latin-ext_latin-700.svg#CourierPrime') format('svg'); /* Legacy iOS */
}

/* courier-prime-700italic - latin-ext_latin */
@font-face {
    font-family: 'Courier Prime';
    font-style: italic;
    font-weight: 700;
    src: url('fonts/courier-prime-v2-latin-ext_latin-700italic.eot'); /* IE9 Compat Modes */
    src: local(''),
       url('fonts/courier-prime-v2-latin-ext_latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/courier-prime-v2-latin-ext_latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/courier-prime-v2-latin-ext_latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('fonts/courier-prime-v2-latin-ext_latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/courier-prime-v2-latin-ext_latin-700italic.svg#CourierPrime') format('svg'); /* Legacy iOS */
}

.teamgrid {
    display: grid;
    grid-template-columns: auto 350px 200px 350px auto;
    row-gap: 120px;
    grid-template-areas:
        ". teamintro teamintro teamintro ."
        ". teammember-1 . . ."
        ". teammember-3 . teammember-4 ."
        ". teammember-5 . teammember-2 .";

}

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

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

.teammember {
    font-family: 'Courier Prime';
    font-style: normal;
    font-weight: 400;
    font-size: 1.9rem;
    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: 15px 15px 80px 15px;
    height: 470px;
}

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

.teammember-2 {
    grid-area: teammember-2;
    transform: rotate(-6deg);
}
.teammember-3 {
    grid-area: teammember-3;
    transform: rotate(-5deg);
}
.teammember-4 {
    grid-area: teammember-4;
    transform: rotate(2deg);
}

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

.teammember img {
    margin-bottom: 5px;
}

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

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

    .teamgrid {
        grid-template-columns: auto 250px 150px 250px auto;
        row-gap: 120px;
    }

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

    .teammember {
        font-size: 1.5rem;
        padding: 15px 15px 80px 15px;
        height: 340px;
    }
}

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

    .teamgrid {
    display: grid;
    grid-template-columns: auto 250px auto;
    row-gap: 80px;
    grid-template-areas:
        ". teamintro ."
        ". teammember-1 ."
        ". teammember-3 ."
        ". teammember-4 ."
        ". teammember-5 ."
        ". teammember-2 .";
    }

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

    .teammember {
        font-size: 1.5rem;
        padding: 15px 15px 80px 15px;
        height: 340px;
    }
}