main {
    padding-top: 87px;
    height: 100dvh;
}

main h3 {
    padding: 0 20px;
    margin-bottom: 32px;
    font-family: "Cormorant SC", serif;
    font-size: 32px;
}

main address {
    gap: 16px;
    flex-wrap: wrap;
    padding: 0 20px;
    margin-bottom: 16px;
}
main address a{
    color: #000;
    padding: 4px 8px;
    border: 1px solid #000;
    flex: 1;
    min-height: fit-content;
    white-space: pre;
    font-family: "Crimson Text", serif;
}
#map {
    flex: 1;
}

@media screen and (max-width: 860px) {
    main h3 {
        font-size: 28px;
    }

    main address a{
        font-size: 14px;
    }
}

@media screen and (max-width: 760px) {
    main h3 {
        font-size: 24px;
    }
}

@media screen and (max-width: 660px) {
    main h3 {
        font-size: 20px;
        padding: 0 16px;
    }

    main address {
        gap: 10px;
        padding: 0 16px;
    }

    main address a{
        font-size: 14px;
    }
}

@media screen and (max-width: 560px) {
    main {
        height: auto;
    }

    #map {
        height: 450px;
        flex: auto;
    }

    main h3 {
        font-size: 18px;
        padding: 0 8px;
        margin-bottom: 16px;
    }

    main address {
        gap: 10px;
        padding: 0 8px;
    }

    .leaflet-touch .leaflet-control-attribution{
        font-size: 8px;
    }
}