body {
    background-color: #cd6f5d;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

    font-size: 1.5rem;
}

img {
    max-width: 100%;
}

a {
    color: #000;
    text-decoration: none;
}

section {
    margin-top: 1rem;
}

main {
    /* background-image: url("/logo.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top; */

    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "services logo map"
        "services logo map"
        "pics pics pics"
        "update update update"
        "address contact contact"
        ". . impressum";
}

@media (max-width: 768px) {
    main {
        grid-template-columns: 1fr;
        grid-template-areas:
            "contact"
            "logo"
            "map"
            "services"
            "pics"
            "update"
            "address"
            "impressum";
    }
}

h1 {
    width: 100%;
    text-align: center;
}

ul {
    list-style-type: none;
}
li {
    list-style-type: none;
}

ul li:before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f061";
    margin: 0 10px 0 -35px;
}

#services {
    grid-area: services;
    font-size: 1.5rem;
}

#logo {
    grid-area: logo;
    padding: 1rem;
}

#map {
    grid-area: map;
}

#address {
    grid-area: address;
}

#update {
    grid-area: update;
}

@media (min-width: 768px) {
    #update {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}


#update div {
    padding: 0 1rem;
}

#contact {
    grid-area: contact;
    font-size: 1.5rem;
    text-align: end;

    i {
        vertical-align: baseline;
    }
}

#pics {
    grid-area: pics;
    display: flex;
    width: 100%;
}

#pics li {
    height: 40vh;
    flex-grow: 1;
}

#pics li.borders {
    padding: 0px 1em;
}
img.left {
    object-position: left;
}
img.right {
    object-position: right;
}

#pics li img {
    min-width: 100%;
    max-height: 100%;
    object-fit: contain;
    vertical-align: bottom;
    flex: 1;
}

.landscape {
    width: 100%;
}
.portrait {
    width: 50%;
}

#impressum {
    text-align: right;
    grid-area: impressum;
}