.map {
    position: relative;
    padding: 0 16px;
    background-color: var(--blueDark);
    height: 506px;
    overflow: hidden;
}

@media screen and (min-width: 1280px) {
    .map {
        height: 663px;
    }
}

.map--container {
    position: relative;
    z-index: 1;
    display: flex;
}

.map--header {
    padding: 56px 0 298px 0;
    flex: 0 1 300px;
}

@media screen and (min-width: 1280px) {
    .map--header {
        padding: 150px 0 280px 0;
        flex: 0 1 407px;
    }
}

.map--header h2 {
    font-weight: 200;
    color: var(--white);
}

.map--header h2+p {
    margin-top: 40px;
}

.map--header h2+ul {
    margin-top: 40px;
}

.map--header p+a {
    margin-top: 40px;
}

.map--header ul+a {
    margin-top: 40px;
}

.map--header p+p {
    margin-top: 32px;
}

.map--header p+ul {
    margin-top: 32px;
}

.map--header ul+p {
    margin-top: 32px;
}

.map--map img {
    height: calc(100% - 258px);
    width: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    object-fit: cover;
    object-position: bottom right;
}

@media screen and (min-width: 390px) {
    .map--map img {
        height: calc(100% - 226px);
    }
}

@media screen and (min-width: 460px) {
    .map--map img {
        height: 100%;
        object-fit: contain;
    }
}

@media screen and (min-width: 594px) {
    .map--map img {
        height: calc(100% - 160px);
    }
}

@media screen and (min-width: 720px) {
    .map--map img {
        height: calc(100% - 130px);
    }
}

@media screen and (min-width: 860px) {
    .map--map img {
        height: calc(100% - 90px);
    }
}

@media screen and (min-width: 1092px) {
    .map--map img {
        height: 100%;
        object-fit: contain;
    }
}

@media screen and (min-width: 1280px) {
    .map--map img {
        height: calc(100% - 64px);
        object-fit: contain;
    }
}

@media screen and (min-width: 1440px) {
    .map--map img {
        height: 100%;
        object-fit: contain;
    }
}