.neighbourhood {
    color: #000;
    gap: 36px;
    max-width: 1440px;
    padding: 114px 64px 231px;
    position: relative
}

.neighbourhood,
.neighbourhood--heading {
    display: flex;
    flex-flow: column nowrap;
    margin: 0 auto
}

.neighbourhood--heading {
    gap: 16px;
    max-width: 697px;
    text-align: center
}

.neighbourhood--title {
    font-family: 'Noto Serif JP', serif;
    font-size: 60px;
    font-weight: 400;
    letter-spacing: -5px;
    line-height: 100%;
    margin: 0
}

.neighbourhood--text {
    font-size: 16px;
    line-height: 150%
}

.neighbourhood--items {
    display: grid;
    gap: 117px 27px;
    grid-template-columns: repeat(3, minmax(254px, 354px));
    justify-content: space-between
}

.neighbourhood--item {
    min-height: 472px;
    overflow: hidden;
    position: relative
}

.neighbourhood--item img {
    bottom: 0;
    object-fit: cover;
    right: 0;
    z-index: -1
}

.neighbourhood--contain,
.neighbourhood--item img {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.neighbourhood--contain {
    align-items: center;
    background: #8b6e4a;
    color: #fff;
    display: flex;
    flex-flow: column nowrap;
    gap: 66px;
    justify-content: center;
    max-height: 472px;
    overflow-x: auto;
    padding: 44px 23px 40px 24px;
    text-align: center;
    transform: translateX(-354px);
    transition: transform .8s ease
}

.neighbourhood--contain::-webkit-scrollbar {
    width: 10px
}

.neighbourhood--contain::-webkit-scrollbar-track {
    background-color: #fff;
    -webkit-box-shadow: inset 0 0 6px #c3c3c3;
    box-shadow: inset 0 0 6px #c3c3c3
}

.neighbourhood--contain::-webkit-scrollbar-thumb {
    background-color: #000;
    outline: unset
}

.neighbourhood--contain_top {
    display: flex;
    flex-flow: column nowrap;
    gap: 24px;
    margin: 0 auto;
    max-width: 297px
}

.neighbourhood--name {
    font-family: 'Noto Serif JP', serif;
    font-size: 36px;
    font-weight: 400;
    letter-spacing: -2px;
    line-height: 100%;
    margin: 0 auto;
    max-width: 271px
}

.neightbourhood--content {
    font-family: Monument Grotesk, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 150%
}

.neighbourhood--contain_bot {
    display: flex;
    flex-flow: column nowrap;
    gap: 15px
}

.neighbourhood--contain .grouped-buttons {
    justify-content: center
}

.neighbourhood--buttons .button {
    background: transparent;
    border: 1px solid #fff;
    border-radius: 40px;
    color: #fff;
    font-family: Roobert PRO TRIAL, sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .05em;
    line-height: 13px;
    padding: 9px 15px;
    text-transform: uppercase
}

.neighbourhood--buttons .button:focus,
.neighbourhood--buttons .button:hover {
    background: #000;
    border-color: #000
}

.neighbourhood--links .link {
    color: #fff;
    font-family: Roobert PRO TRIAL, sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .05em;
    line-height: 13px;
    text-transform: uppercase
}

.neighbourhood--item:nth-child(3n+2) {
    transform: translateY(101px)
}

.neighbourhood--item:focus .neighbourhood--contain,
.neighbourhood--item:hover .neighbourhood--contain {
    transform: translateX(0)
}

.neighbourhood--sliders {
    display: none
}

@media only screen and (max-width:1024px) {
    .neighbourhood {
        gap: 40px;
        padding: 100px 0 40px 40px
    }

    .neighbourhood--heading {
        gap: 15px;
        max-width: 575px;
        padding: 0 40px 0 0
    }

    .neighbourhood--title {
        font-size: 64px;
        line-height: 100%
    }

    .neighbourhood--text {
        font-size: 20px;
        line-height: 150%
    }

    .neighbourhood--items {
        display: none
    }

    .neighbourhood--sliders {
        display: block;
        padding-right: 58px;
        width: 100%
    }

    .neighbourhood--sliders:not(.swiper-initialized) .swiper-slide {
        margin-right: 16px;
        width: 49%
    }

    .neighbourhood--slide {
        position: relative
    }

    .neighbourhood--slide:before {
        background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .6));
        content: "";
        display: block;
        height: 100%;
        left: 0;
        padding-top: 100%;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 2
    }

    .neighbourhood--slide img {
        bottom: 0;
        height: 100%;
        left: 0;
        object-fit: cover;
        position: absolute;
        right: 0;
        top: 0;
        width: 100%
    }

    .neighbourhood--slide_contain {
        display: flex;
        flex-flow: column nowrap;
        gap: 52px;
        height: 100%;
        justify-content: flex-end;
        min-height: 492px;
        padding: 24px;
        position: relative;
        width: 100%;
        z-index: 3
    }

    .neighbourhood--slide_name {
        color: #fff;
        font-family: 'Noto Serif JP', serif;
        font-size: 36px;
        font-style: normal;
        font-weight: 400;
        letter-spacing: -.04em;
        line-height: 43px;
        text-align: center
    }

    .neighbourhood--slide_contain_bot {
        align-items: center;
        display: flex;
        justify-content: center;
        position: relative
    }

    .neighbourhood--slide_links {
        flex: 1 1 40%;
        justify-content: center
    }

    .neighbourhood--slide_links a {
        align-items: center;
        color: #fff;
        display: inline-flex;
        font-size: 11px;
        font-weight: 500;
        gap: 6px;
        letter-spacing: .06em;
        line-height: 11px;
        position: relative;
        text-transform: uppercase
    }

    .neighbourhood--slide_links a:focus,
    .neighbourhood--slide_links a:hover {
        color: #8b6e4a;
        text-decoration: none
    }

    .neighbourhood--slide_links_2 a {
        justify-content: center;
        width: 100%
    }

    .neighbourhood--slide_links svg {
        height: 16px;
        width: 16px
    }

    .neighbourhood--slide_line {
        flex: 0 0 4px;
        position: relative
    }

    .neighbourhood--slide_line:before {
        border-right: .5px solid #fff;
        bottom: 0;
        content: "";
        height: 18px;
        left: 0;
        margin: auto;
        opacity: .5;
        position: absolute;
        right: 0;
        top: 0;
        width: .5px
    }

    .neighbourhood--pagination {
        align-items: center;
        color: #000 !important;
        display: flex;
        font-size: 14px;
        font-weight: 400;
        gap: 5px;
        letter-spacing: .06em;
        padding: 42px 0 0
    }
}

@media only screen and (max-width:767px) {
    .neighbourhood {
        gap: 63px;
        padding: 120px 0 48px 24px
    }

    .neighbourhood--heading {
        gap: 40px;
        padding: 0 24px 0 0;
        text-align: left
    }

    .neighbourhood--title {
        font-size: 42px;
        letter-spacing: -3px;
        line-height: 110%
    }

    .neighbourhood--sliders {
        padding-right: 46px
    }

    .neighbourhood--sliders:not(.swiper-initialized) .swiper-slide {
        width: 99%
    }

    .neighbourhood--slide_contain {
        gap: 42px;
        padding: 24px 16px
    }

    .neighbourhood--slide_name {
        font-size: 40px;
        letter-spacing: -.04em;
        line-height: 48px
    }

    .neighbourhood--slide_line {
        flex: 0 0 24px;
        position: relative
    }
}