.landing-page {
    --landing-map-width: min(calc(100vw - 2 * var(--space-6xl)), 1816px);

    display: flex;
    flex-direction: column;
}

.landing-tagline {
    order: 1;
    align-self: center;
    width: var(--landing-map-width);
    /* Figma: text starts 708px across and 25px above the 1816px map's bottom. */
    margin: calc(var(--landing-map-width) * -25 / 1816) 0 var(--space-xl);
    padding-left: calc(var(--landing-map-width) * 708 / 1816);
    color: var(--color-text-secondary);
    font-family: var(--type-family-display), monospace;
    font-size: var(--type-size-logo);
    font-weight: var(--type-weight-regular);
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
}

#map-container {
    position: relative;
    width: 100%;
    height: auto;

    padding-right: var(--space-6xl);
    padding-left: var(--space-6xl);
}

.map {
    position: relative;
    width: min(100%, 1816px);
    height: auto;
    margin-right: auto;
    margin-left: auto;
}

.world-map {
    width: 100%;
    aspect-ratio: 227 / 110;

    display: block;
    background-color: var(--color-map-base);

    mask: var(--map-image) center / contain no-repeat;
    -webkit-mask: var(--map-image) center / contain no-repeat;
}

@media (max-width: 900px) {
    .landing-tagline {
        order: 0;
        align-self: stretch;
        width: auto;
        margin: var(--space-lg) var(--space-lg) 0;
        padding-left: 0;
        font-size: clamp(var(--type-size-body), 4vw, var(--type-size-logo));
        text-align: center;
        white-space: normal;
    }

    #map-container {
        padding-right: var(--space-lg);
        padding-left: var(--space-lg);
    }
}

@media (max-width: 444px) {
    .landing-page #map-container {
        padding: 0;
    }

    .landing-page #map-container > .map {
        display: none;
    }
}