.map-interests {
    margin-bottom: 160px
}

.map-interests-canvas {
    height: 760px;
    margin-bottom: 100px
}

.map-interests-canvas button {
    border: 0;
    min-width: 0;
    padding: 0
}

.dnd-section[class*=full-width-section] .map-interests-canvas {
    margin-left: -80px;
    margin-right: -80px
}

.map-points-of-interest {
    display: grid;
    gap: 38px 145px;
    grid-auto-flow: column;
    grid-template-rows: repeat(4,1fr);
    list-style: none;
    margin: 0 auto;
    max-width: 944px;
    padding: 0
}

.map-points-of-interest li {
    border-bottom: .5px solid rgba(0,0,0,.2);
    padding-bottom: 16px;
    position: relative
}

.map-points-of-interest .index {
    font-size: 13px;
    left: -36px;
    line-height: 130%;
    opacity: .5;
    position: absolute;
    top: 7px
}

.map-points-of-interest .text {
    font-family: adobe-jenson-pro-display,serif;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 150%;
    margin: 0 0 5px
}

.map-points-of-interest .distance {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 16px;
    text-transform: uppercase
}

.map-points-of-interest .distance p {
    margin: 0;
    padding-left: 24px;
    position: relative
}

.map-points-of-interest .distance svg {
    stroke: currentColor;
    height: auto;
    left: 0;
    position: absolute;
    top: 0;
    width: 16px
}

.map-points-of-interest .distance .drive:first-child:not(:last-child) {
    border-right: .5px solid rgba(0,0,0,.2);
    padding-right: 16px
}

.map-points-of-interest .distance .walk:last-child:not(:first-child) {
    margin-left: 16px
}

@media (max-width: 1024px) {
    .map-interests {
        margin-bottom:128px
    }

    .map-interests-canvas {
        height: 440px;
        margin-bottom: 80px
    }

    .dnd-section[class*=full-width-section] .map-interests-canvas {
        margin-left: -24px;
        margin-right: -24px
    }

    .map-points-of-interest {
        gap: 32px 90px;
        max-width: 554px
    }

    .map-points-of-interest li {
        padding-bottom: 12px
    }

    .map-points-of-interest .index {
        font-size: 10px;
        left: -26px;
        top: 4px
    }

    .map-points-of-interest .text {
        font-size: 24px;
        letter-spacing: 0;
        margin: 0 0 4px
    }
}

@media (max-width: 767px) {
    .map-interests {
        margin-bottom:81px
    }

    .map-interests-canvas {
        height: 376px;
        margin-bottom: 41px
    }

    .dnd-section[class*=full-width-section] .map-interests-canvas {
        margin-left: -20px;
        margin-right: -20px
    }

    .map-points-of-interest {
        display: block;
        padding-left: 26px
    }

    .map-points-of-interest li {
        margin-bottom: 32px
    }
}