:root {
    --gold-color: #a68541;
    --black-color: #48474d;
    --taupe-color: #95887a;
    --grey-color: #48474d;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6 {
    all: initial;
}

a {
    color: inherit;
    text-decoration: none;
}

html,
body {
    scroll-behavior: smooth;
    color: var(--black-color);
    font-family: Georgia, 'Times New Roman', Times, serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

address {
    all: initial;
    font: inherit;
    color: inherit;
}

img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

h2 {
    margin-bottom: 5px;
    display: block;
    font-size: 13px;
    text-transform: uppercase;
}

h3 {
    display: block;
    font-family: 'Lemon/Milk', sans-serif;
    font-size: 28px;
    line-height: 1.2em;
    text-transform: uppercase;
}

a.button {
    padding: 10px 20px;
    font-size: 0.8em;
    text-transform: uppercase;
}

.buttons {
    display: flex;
    gap: 10px;
}

@media (min-width: 1024px) {
    h2 {
        font-size: 1em;
    }

    h3 {
        font-size: 36px;
    }
}

/**
 * Color Schemes
 */
h2 {
    color: var(--gold-color);
}

body,
p,
h3 {
    color: var(--black-color);
}

a.button {
    background: var(--taupe-color);
    color: white;
}

.secondary-color-scheme {
    background-color: var(--taupe-color);
    color: white;

    h2 {
        color: #ede8d0;
    }

    p,
    h3 {
        color: inherit;
    }

    a.button {
        background: white;
        color: var(--taupe-color);
    }
}

.tertiary-color-scheme {
    background: var(--grey-color);
    color: white;

    h2 {
        color: #ede8d0;
    }

    p,
    h3 {
        color: inherit;
    }

    a.button {
        background: white;
        color: var(--grey-color);
    }
}

/**
 * Header
 */
header {
    position: relative;

    .image-box {
        img {
            display: block;
            width: 100%;
            height: 100%;
            max-height: 30svh;
            object-fit: cover;
            object-position: bottom;
        }

        &:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            width: 100%;
            height: 100%;
            background: linear-gradient(rgba(149, 136, 122, 0), rgba(149, 136, 122, 1));
        }
    }

    .content-box {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;

        .logo {
            margin: 0 auto;
            display: block;
            width: 60%;
            max-width: 400px;
        }
    }
}

@media (min-width: 1024px) {
    header {
        .image-box {
            img {
                max-height: 80svh;
            }
        }
    }
}

/**
 * Navigation
 */
nav {
    display: none;
}

@media (min-width: 1024px) {
    nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: var(--taupe-color);

        ul,
        ul li {
            all: initial;
            color: inherit;
        }

        ul {
            display: flex;
            gap: 20px;

            li {
                a {
                    display: block;
                    padding-top: 20px;
                    padding-bottom: 20px;
                    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
                    color: white;
                    text-transform: uppercase;
                }
            }
        }
    }
}

/**
 * Sections (General)
 */
section:not(:last-child) {
    border-bottom: 1px solid #eee;
}

/**
 * Introductie
 */
#introductie {
    .layout {
        padding-bottom: 40px;
    }

    .image-box {
        padding-top: 25px;
        background: linear-gradient(180deg, var(--taupe-color) 0%, var(--taupe-color) 50%, white 50%);

        img {
            margin: 0 auto;
            width: 90vw;
            max-width: 1440px;
            border: 4px solid white;
        }
    }

    .text-box {
        padding-top: 40px;


        margin: 0 auto;
        width: 90vw;
        max-width: 600px;
    }
}

@media (min-width: 1024px) {
    #introductie {
        .layout {
            padding-bottom: 100px;
        }

        .text-box {
            padding-top: 50px;

            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .text-box>* {
            text-align: center;
        }
    }
}

/**
 * Architect
 */
#architect {
    .layout {
        padding-top: 40px;
    }

    .text-box {
        margin: 0 auto;
        width: 90vw;
        max-width: 600px;
    }

    .image-box {
        margin: 0 auto;
        width: 100%;
        max-width: 1440px;
    }
}

@media (min-width: 1024px) {
    #architect {
        .layout {
            padding-top: 100px;
        }

        .text-box {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .text-box>* {
            text-align: center;
        }
    }
}

/**
 * Plattegronden
 */
#plattegronden {
    .layout {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .text-box {
        margin: 0 auto;
        width: 90vw;
        max-width: 600px;
    }

    input {
        display: none;
    }

    .maps-nav {
        padding-top: 40px;
        padding-bottom: 40px;

        margin: 0 auto;
        width: 90vw;
        max-width: 1440px;

        ul, ul li {
            all: initial;
            font: inherit;
            color: inherit;
        }

        ul {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
        }

        label {
            padding-top: 5px;

            cursor: pointer;
            display: block;
            width: 60px;
            background: var(--grey-color);
            color: white;
            font-family: 'Lemon/Milk', sans-serif;
            text-align: center;

            .number, .letter {
                display: block;
            }

            .number {
                font-size: 20px;
            }

            .letter {
                font-size: 28px;
            }
        }
    }

    .map-box {
        display: none;

        h2 {
            text-align: center;
            margin-bottom: 20px;
        }
    }

    #map-switch-23A:checked ~ .maps-nav label[for="map-switch-23A"],
    #map-switch-23B:checked ~ .maps-nav label[for="map-switch-23B"],
    #map-switch-23C:checked ~ .maps-nav label[for="map-switch-23C"],
    #map-switch-23D:checked ~ .maps-nav label[for="map-switch-23D"],
    #map-switch-23E:checked ~ .maps-nav label[for="map-switch-23E"],
    #map-switch-23F:checked ~ .maps-nav label[for="map-switch-23F"],
    #map-switch-23G:checked ~ .maps-nav label[for="map-switch-23G"]
    {
        background: var(--taupe-color);
        color: white;
    }

    #map-switch-23A:checked ~ #map-box-23A,
    #map-switch-23B:checked ~ #map-box-23B,
    #map-switch-23C:checked ~ #map-box-23C,
    #map-switch-23D:checked ~ #map-box-23D,
    #map-switch-23E:checked ~ #map-box-23E,
    #map-switch-23F:checked ~ #map-box-23F,
    #map-switch-23G:checked ~ #map-box-23G
    {
        display: grid;
    }
}

@media (min-width: 600px) {
    #plattegronden {
        .maps-nav {
            ul {
                justify-content: center;
            }
        }
    }
}

@media (min-width: 1024px) {
    #plattegronden {
        .layout {
            padding-top: 100px;
            padding-bottom: 100px;
        }

        .text-box {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .text-box>* {
            text-align: center;
        }

        .maps-nav {
            label {
                .letter {
                    font-size: 36px;
                }
            }
        }

        .map-box {
            margin: 0 auto;
            width: 90vw;
            max-width: 1440px;
            grid-template-columns: 1fr;

            h2 {
                margin-bottom: 50px;
            }
        }

        .map-box:not(.col2) {
            .image-box {
                margin: 0 auto;
                max-width: 50%;
            }
        }

        .map-box.col2 {
            grid-template-columns: 1fr 1fr;

            h2 {
                grid-column: 1 / -1;
            }
        }
    }
}

/**
 * Appartementen
 */
#appartementen {
    .layout {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .text-box {
        padding-bottom: 40px;
        margin: 0 auto;
        width: 90vw;
        max-width: 600px;
    }

    .images-box {
        margin: 0 auto;
        width: 100%;
        max-width: 1440px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2px;

        .image-box {
            width: 100%;
            aspect-ratio: 1 / 1;

            img {
                display: block;
                width: 100%;
                height: 100%;
                object-fit: cover;
                object-position: center;
            }
        }
    }
}

@media (min-width: 768px) {
    #appartementen {
        .images-box {
            grid-template-columns: repeat(3, 1fr);
        }
    }
}

@media (min-width: 1024px) {
    #appartementen {
        .layout {
            padding-top: 100px;
            padding-bottom: 100px;

            margin: 0 auto;
            width: 100%;
            max-width: calc(1440px + 10vw);
            display: grid;
            grid-template-columns: 5vw 1fr 5vw 2fr 5vw;
            align-items: center;
        }

        .text-box {
            grid-column: 2;
            width: auto;
        }

        .images-box {
            grid-column: 4 / -1;
            width: auto;
            gap: 5px;

            .image-box {
                aspect-ratio: auto;
                max-height: 287px;
            }

            .image-box:not(:nth-child(2)):not(:nth-child(5)) {
                transform: translateY(-10px);
            }

            .image-box:nth-child(2),
            .image-box:nth-child(5) {
                transform: translateY(10px);
            }
        }
    }
}

/**
 * Gevel
 */
#gevel {
    .layout {
        padding-top: 40px;
        padding-bottom: 40px;

        margin: 0 auto;
        width: 90vw;
        max-width: 1440px;

        display: grid;
        grid-template-columns: 1fr;
        row-gap: 40px;
    }

    h3 {
        margin-top: 20px;
        text-align: center;
    }
}

@media (min-width: 768px) {
    #gevel {
        .layout {
            padding-top: 100px;
            padding-bottom: 100px;

            grid-template-columns: 1fr 1fr;
            gap: 5vw;
        }
    }
}

/**
 * Duurzaamheid
 */
#duurzaamheid {
    .layout {
        padding-top: 40px;
        padding-bottom: 40px;

        margin: 0 auto;
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
    }

    .text-box {
        padding-top: 40px;
        padding-bottom: 40px;

        order: 2;
        margin: 0 auto;
        width: 90vw;
        max-width: 600px;
    }

    .image-box {
        order: 1;
    }
}

@media (min-width: 1024px) {
    #duurzaamheid {
        .layout {
            padding-top: 100px;
            padding-bottom: 100px;

            width: 90vw;
            max-width: 1440px;

            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: 5vw;
        }

        .text-box {
            order: 1;
            width: auto;
            max-width: none;
        }

        .image-box {
            order: 2;
            height: 100%;

            img {
                height: 100%;
            }
        }
    }
}

/**
 * Locatie
 */
#locatie {
    .layout {
        padding-top: 40px;
        padding-bottom: 40px;

        margin: 0 auto;
        width: 90vw;
        max-width: 1440px;

        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 3px;
    }

    .text-box {
        margin: 0 auto;
        width: 90vw;
        max-width: 600px;
        padding-bottom: 40px;
    }

    .text-box:first-child {
        order: 1;
        grid-column: span 3;
    }

    .text-box:not(:first-child) {
        order: 2;
        grid-column: span 3;
    }

    .image-box {
        order: 3;

        img {
            height: 100%;
            object-fit: cover;
            object-position: center;
        }
    }

    .image-box.pinned-location {
        grid-column: span 3;
    }
}

@media (min-width: 1024px) {
    #locatie {
        .layout {
            padding-top: 100px;
            padding-bottom: 100px;

            width: 100%;
            max-width: calc(1440px + 10vw);

            grid-template-columns: 5vw repeat(4, 1fr);
            gap: 30px;
        }

        .text-box {
            width: auto;
        }

        .text-box:first-child {
            grid-column: 2;
            margin-left: -30px;
        }

        .text-box:first-child,
        .text-box:not(:first-child),
        .image-box {
            order: initial;
        }

        .image-box.pinned-location {
            grid-column: span 2;
        }

        .text-box:not(:first-child) {
            grid-column: 3;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: end;
            text-align: right;

            i {
                line-height: 1.5em;
            }
        }
    }
}

/**
 * Contact
 */
#contact {
    .layout {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .text-box {
        margin: 0 auto;
        width: 90vw;
        max-width: 600px;

        .buttons {
            margin-top: 2em;
        }
    }
}

@media (min-width: 1024px) {
    #contact {
        .layout {
            padding-top: 100px;
            padding-bottom: 100px;
        }

        .text-box {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .text-box>* {
            text-align: center;
        }
    }
}

/**
 * Footer 
 */
footer {
    padding-bottom: env(safe-area-inset-bottom);

    .layout {
        padding-top: 40px;
        padding-bottom: 40px;

        margin: 0 auto;
        width: 90vw;
        max-width: 600px;
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 40px;;
    }

    address {
        .image-box {
            margin-bottom: 40px;

            img {
                width: auto;
            }

            img.heeren-makelaars {
                height: 60px;
            }

            img.dml-studio {
                height: 20px;
            }

            img.clairz-interior-design {
                height: 40px;
            }
        }
    }
}

@media (min-width: 1024px) {
    footer {
        .layout {
            padding-top: 100px;
            padding-bottom: 100px;

            max-width: 1440px;

            grid-template-columns: repeat(3, 1fr);
            gap: 5vw;
        }

        address {
            text-align: center;

            .image-box {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 60px;
            }
        }
    }
}