.ornament {
    position: absolute;
    width: 100%;
    height: 87px;
    background-image: url("../img/fragment.svg");
    background-repeat: repeat;
    background-position: 20px 0px;
    overflow-x: hidden;
    z-index: -1;
    top: 70px;
}

.map_h3 {
    color: var(--text-turquoise);
    text-transform: uppercase;
    padding: 15px 0;
    border-top: 1px solid var(--turquoise-opacity05);
}

.map_section {
    padding: 10px 20px;
    margin-bottom: 10px;
    border-top: 1px solid var(--turquoise-opacity05);
}

.two_columns {
    column-count: 2;
    list-style-position: outside;
    column-gap: 50px;
}

.no_braak {
    break-inside: avoid;
}

.map_section ul li {
    padding: 5px 0;
    break-inside: avoid;
}

.page {
    color: var(--turquoise);
}

.map_section ul li::marker {
    color: var(--turquoise);
}

@media only screen and (max-width: 600px) {
    .two_columns {
        column-count: 1;
    }

    .map_section {
        padding: 10px 15px;
    }

    .map_h3 {
        margin-left: 0px;
    }
}

@media only screen and (min-width: 1900px) {
    .map_h3 {
        font-size: calc(1.17em * var(--scale));
        padding: calc(15px * var(--scale)) 0;
    }

    .map_section {
        font-size: calc(1em * var(--scale));
        padding: calc(10px * var(--scale)) calc(20px * var(--scale));
        margin-bottom: calc(10px * var(--scale));
    }

    .two_columns {
        column-gap: calc(50px * var(--scale));
    }

    .ornament {
        transform-origin: top;
        transform: scale(var(--scale));
        top: calc(70px * var(--scale));
    }
}

@media (prefers-color-scheme: dark) {
    .ornament {
        background-image: url("../img/dark_fragment.svg");
    }

    @media (hover: hover) and (pointer: fine) {
        .page:hover {
            color: var(--white);
        }
    }
}