.explore-locations {
  transition: all 0.3s ease-out;
}

.explore-map-carousels {
  position: relative;
}
.explore-map-carousels .explore-map-container {
  width: calc(65% + var(--space-xl));
  position: relative;
}
@media only screen and (max-width: 64rem) {
  .explore-map-carousels .explore-map-container {
    width: 60%;
  }
}
@media only screen and (max-width: 48rem) {
  .explore-map-carousels .explore-map-container {
    width: 55%;
  }
}
@media only screen and (max-width: 48rem) {
  .explore-map-carousels .explore-map-container {
    width: 100%;
    flex-grow: 1;
    height: 30rem;
    margin-top: var(--space-l);
  }
}
.explore-map-carousels .explore-map-container .explore-map {
  position: relative;
  width: 100%;
  height: 38.5rem;
  min-height: 25rem;
  max-height: 70vh;
  background: #e2e2e2;
}
@media only screen and (max-width: 48rem) {
  .explore-map-carousels .explore-map-container .explore-map {
    width: 100%;
    height: 100%;
    max-height: unset;
    min-height: unset;
  }
}
.explore-map-carousels .explore-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-s);
}
.explore-map-carousels .explore-controls .explore-nav {
  margin: unset;
}
@media only screen and (max-width: 48rem) {
  .explore-map-carousels .explore-controls {
    display: none;
  }
}
.explore-map-carousels .explore-dots {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2xs);
}
.explore-map-carousels .explore-dots .slash {
  width: var(--size-s-5);
  height: 4px;
  color: var(--color-body);
  background: var(--color-body);
  -webkit-mask-image: url("/wp-content/themes/st-christophers-inns/assets/masks/directory-hotel-gallery-mask-slash.svg");
          mask-image: url("/wp-content/themes/st-christophers-inns/assets/masks/directory-hotel-gallery-mask-slash.svg");
}
.explore-map-carousels .explore-carousels {
  width: 35%;
  z-index: 2;
  position: absolute;
  z-index: 2;
  right: 0;
  top: 0;
  height: 100%;
}
@media only screen and (max-width: 64rem) {
  .explore-map-carousels .explore-carousels {
    width: 40%;
  }
}
@media only screen and (max-width: 48rem) {
  .explore-map-carousels .explore-carousels {
    width: 45%;
  }
}
@media only screen and (max-width: 48rem) {
  .explore-map-carousels .explore-carousels {
    width: 100%;
    display: flex;
    align-items: center;
    padding: var(--size-m) 0 var(--size-m) var(--size-l);
    position: relative;
    margin-top: -2.188rem;
  }
}
.explore-map-carousels .explore-carousels .explore-carousel,
.explore-map-carousels .explore-carousels .slick-list,
.explore-map-carousels .explore-carousels .slick-track {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media only screen and (max-width: 48rem) {
  .explore-map-carousels .explore-carousels .explore-carousel,
  .explore-map-carousels .explore-carousels .slick-list,
  .explore-map-carousels .explore-carousels .slick-track {
    position: relative;
  }
}
@media only screen and (max-width: 48rem) {
  .explore-map-carousels .explore-carousels .slick-track {
    display: flex;
    gap: var(--gutter-tight);
  }
  .explore-map-carousels .explore-carousels .slick-list {
    margin-left: var(--container-wide);
  }
}

.explore-carousel-slide {
  text-align: center;
  position: relative;
  --mask-border:: url("/wp-content/themes/st-christophers-inns/assets/masks/explore-carousel-slide.svg");
  -webkit-mask-box-image: var(--mask-border) 1 1;
          mask-border: var(--mask-border) 1 1;
  -webkit-mask-box-image-slice: 33.333 fill;
          mask-border-slice: 33.333 fill;
}
@media only screen and (max-width: 48rem) {
  .explore-carousel-slide .slide-carousel-content-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .explore-carousel-slide {
    margin-right: var(--size-s);
    width: 20rem;
    aspect-ratio: 1/1;
    -webkit-mask-box-image: unset;
            mask-border: unset;
    border-radius: 8px;
    overflow: hidden;
  }
  .explore-carousel-slide .slide-carousel-content p {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-body);
    text-transform: var(--text-transform-body);
    font-size: var(--font-size-body-s);
    line-height: var(--line-height-body-s);
    letter-spacing: var(--letter-spacing-body-s);
    font-style: var(--font-style-body);
  }
}
.explore-carousel-slide .button {
  margin-bottom: 0;
  margin-top: var(--size-s);
}
.explore-carousel-slide .slide-inner {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  padding: var(--space-m) var(--space-xl);
}
@media only screen and (max-width: 48rem) {
  .explore-carousel-slide .slide-inner {
    position: relative;
    gap: var(--space-s);
  }
}
.explore-carousel-slide .slide-inner .overline {
  position: absolute;
  top: var(--space-l);
  padding: var(--space-2xs) var(--space-xs);
  font-family: var(--font-family-overline);
  font-weight: var(--font-weight-overline);
  text-transform: var(--text-transform-overline);
  font-size: var(--font-size-overline-1);
  line-height: var(--line-height-overline-1);
  letter-spacing: var(--letter-spacing-overline-1);
  font-style: var(--font-style-overline);
  border-radius: 1000000000px;
  border: 1px solid var(--color-body);
  width: -moz-fit-content;
  width: fit-content;
  margin: unset;
}
@media only screen and (max-width: 48rem) {
  .explore-carousel-slide .slide-inner .overline {
    position: relative;
    top: unset;
  }
}
.explore-carousel-slide .slide-inner h3 {
  font-family: var(--font-family-large-heading);
  font-weight: var(--font-weight-large-heading);
  text-transform: var(--text-transform-large-heading);
  font-size: var(--font-size-large-heading-3);
  line-height: var(--line-height-large-heading-3);
  letter-spacing: var(--letter-spacing-large-heading-3);
  font-style: var(--font-style-large-heading);
  margin-bottom: var(--space-l);
}
.explore-carousel-slide .slide-inner h3 .subtitle, .explore-carousel-slide .slide-inner h3 .subtitle p {
  font-family: var(--font-family-subtitle);
  font-weight: var(--font-weight-subtitle);
  text-transform: var(--text-transform-subtitle);
  font-size: var(--font-size-subtitle-2);
  line-height: var(--line-height-subtitle-2);
  letter-spacing: var(--letter-spacing-subtitle-2);
  font-style: var(--font-style-subtitle);
  margin-top: var(--space-3xs);
}
.explore-carousel-slide .slide-inner h3 p:last-of-type {
  margin: unset;
}
@media only screen and (max-width: 48rem) {
  .explore-carousel-slide .slide-inner h3 {
    font-family: var(--font-family-small-heading);
    font-weight: var(--font-weight-small-heading);
    text-transform: var(--text-transform-small-heading);
    font-size: var(--font-size-small-heading-1);
    line-height: var(--line-height-small-heading-1);
    letter-spacing: var(--letter-spacing-small-heading-1);
    font-style: var(--font-style-small-heading);
    text-transform: capitalize;
    margin-bottom: unset;
  }
}
.explore-carousel-slide .slide-inner h3,
.explore-carousel-slide .slide-inner p {
  width: 100%;
}
.explore-carousel-slide img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.explore-controls {
  position: absolute;
  bottom: var(--space-m);
  left: 0;
  width: 100%;
  z-index: 3;
  text-align: center;
}
.explore-controls .explore-nav {
  color: var(--color-body);
  margin: 0 var(--space-3xs);
}
.explore-controls .explore-nav svg {
  display: block;
}

.explore-nav-wrapper {
  padding: 0 var(--container-wide) var(--space-2xl) var(--container-wide);
  position: relative;
}
@media only screen and (max-width: 48rem) {
  .explore-nav-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: unset;
    gap: var(--space-m);
  }
  .explore-nav-wrapper h2 {
    padding: 0 var(--container-wide) var(--space-2xl) var(--container-wide);
    padding-bottom: unset;
  }
  .explore-nav-wrapper .explore-nav {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow: auto;
    gap: var(--space-s);
    width: 100%;
  }
  .explore-nav-wrapper .explore-nav a {
    text-wrap-mode: nowrap;
  }
  .explore-nav-wrapper .explore-nav a:first-of-type {
    margin-left: var(--container-standard);
  }
  .explore-nav-wrapper .explore-nav a:last-of-type {
    margin-right: var(--container-standard);
  }
}
.explore-nav-wrapper h2 {
  padding-right: var(--space-2xl);
  font-family: var(--font-family-large-heading);
  font-weight: var(--font-weight-large-heading);
  text-transform: var(--text-transform-large-heading);
  font-size: var(--font-size-large-heading-1);
  line-height: var(--line-height-large-heading-1);
  letter-spacing: var(--letter-spacing-large-heading-1);
  font-style: var(--font-style-large-heading);
  color: var(--color-accent-primary-dark);
}

.explore-nav {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s);
  padding-bottom: 0.6rem;
  scrollbar-color: var(--color-accent-primary) var(--color-accent-primary);
}
.explore-nav a {
  margin: 0;
  position: relative;
  padding: var(--space-2xs) var(--space-xs);
  font-family: var(--font-family-overline);
  font-weight: var(--font-weight-overline);
  text-transform: var(--text-transform-overline);
  font-size: var(--font-size-overline-1);
  line-height: var(--line-height-overline-1);
  letter-spacing: var(--letter-spacing-overline-1);
  font-style: var(--font-style-overline);
  border-radius: 1000000000px;
  border: 1px solid var(--color-body);
  color: var(--color-body);
  min-height: unset;
}
.explore-nav a.active, .explore-nav a:hover {
  color: var(--color-background);
  background-color: vaR(--color-accent-primary);
  border-color: var(--color-accent-primary);
}

.explore-nav-mob {
  overflow: auto;
  padding: var(--space-s) 0 var(--space-s) var(--space-l);
  position: relative;
}
.explore-nav-mob:after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 2rem;
  z-index: 2;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
}
/*# sourceMappingURL=neighbourhood.css.map */