/* Main */
body > main {
    display: grid;
    width: 100%;
    background-color: floralwhite;
}

/* Sektionen */
body > main > section {
    padding: 25px;
    background-color: antiquewhite;
    border-radius: 15px;
    box-shadow: 10px 10px 20px 0px gray;
}
body > main > section:nth-child(1) {
    --col-desktop: 1 / span 2;
    --row-desktop: 1;
    --margin-desktop: 50px 15px 15px 50px;
    --col-tablet: 1 / span 2;
    --row-tablet: 1;
    --margin-tablet: 25px 15px 15px 25px;
    --col-mobile: 1;
    --row-mobile: 1;
    --margin-mobile: 15px 15px 15px 15px;
}
body > main > section:nth-child(2) {
    --col-desktop: 3;
    --row-desktop: 1;
    --margin-desktop: 50px 50px 15px 15px;
    --col-tablet: 3;
    --row-tablet: 1;
    --margin-tablet: 25px 25px 15px 15px;
    --col-mobile: 1;
    --row-mobile: 2;
    --margin-mobile: 15px 15px 15px 15px;
}
body > main > section:nth-child(3) {
    --col-desktop: 1 / span 3;
    --row-desktop: 2;
    --margin-desktop: 15px 50px 15px 50px;
    --col-tablet: 1 / span 3;
    --row-tablet: 2;
    --margin-tablet: 15px 25px 15px 25px;
    --col-mobile: 1;
    --row-mobile: 3;
    --margin-mobile: 15px 15px 15px 15px;
}
body > main > section:nth-child(4) {
    --col-desktop: 1;
    --row-desktop: 3;
    --margin-desktop: 15px 15px 15px 50px;
    --col-tablet: 1;
    --row-tablet: 3;
    --margin-tablet: 15px 15px 15px 25px;
    --col-mobile: 1;
    --row-mobile: 4;
    --margin-mobile: 15px 15px 15px 15px;
}
body > main > section:nth-child(5) {
    --col-desktop: 2 / span 2;
    --row-desktop: 3;
    --margin-desktop: 15px 50px 15px 15px;
    --col-tablet: 2 / span 2;
    --row-tablet: 3;
    --margin-tablet: 15px 25px 15px 15px;
    --col-mobile: 1;
    --row-mobile: 5;
    --margin-mobile: 15px 15px 15px 15px;
}
body > main > section:nth-child(6) {
    --col-desktop: 1 / span 3;
    --row-desktop: 4;
    --margin-desktop: 15px 50px 50px 50px;
    --col-tablet: 1 / span 3;
    --row-tablet: 4;
    --margin-tablet: 15px 25px 25px 25px;
    --col-mobile: 1;
    --row-mobile: 6;
    --margin-mobile: 15px 15px 15px 15px;
}

@media screen and (max-width: 767px) { /* Mobile */
    body > main {
        grid-template-columns: 100%;
        grid-template-rows: repeat(6, auto);
    }
    body > main > section {
        grid-column: var(--col-mobile);
        grid-row: var(--row-mobile);
        margin: var(--margin-mobile);
    }
    body > main > section:nth-child(2),
    body > main > section:nth-child(4) {
        height: calc((100vw - 30px) / 0.66);
    }
}
@media screen and (min-width: 768px) and (max-width: 1199px) { /* Tablet */
    body > main {
        grid-template-columns: repeat(3, calc(100% / 3));
        grid-template-rows: repeat(4, auto);
    }
    body > main > section {
        grid-column: var(--col-tablet);
        grid-row: var(--row-tablet);
        margin: var(--margin-tablet);
    }
}
@media screen and (min-width: 1200px) { /* Desktop */
    body > main {
        grid-template-columns: repeat(3, calc(100% / 3));
        grid-template-rows: repeat(4, auto);
    }
    body > main > section {
        grid-column: var(--col-desktop);
        grid-row: var(--row-desktop);
        margin: var(--margin-desktop);
    }
}

/* Hintergrundbilder */
body > main > section.image:nth-child(2) {
    background-image: url(../img/Lukas-Ruehl-2.jpg);
}
body > main > section.image:nth-child(4) {
    background-image: url(../img/Lukas-Ruehl-3.jpg);
}
body > main > section.image {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* Text */
body p,
body a,
body li,
body button {
    font-family: "Cera Round";
    font-weight: normal;
    font-size: 1em;
    text-align: justify;
}
body h1,
body h2,
body h3 {
    font-family: "Cera Round";
    font-weight: bold;
}
body h2 {
    font-size: 1.4em;
}
body h3 {
    font-size: 1.2em;
}

/* Buttons */
a.button,
button.button {
    padding: 5px 8px;
    border: none;
    color: black;
    background-color: rgba(210, 180, 140, 0.5);
    box-shadow: 6px 6px 12px 0px gray;
    font-size: 0.75em;
    text-decoration: none;
    cursor: pointer;
}