/* Keep the native chapter slider, with text and photography in the same frame. */
.ens-page-mehdi #regard {
  --regard-background: #141414;
  --regard-text: #fff;
  --regard-muted: #d2d2d2;
  --regard-gutter: clamp(24px, 5vw, 72px);
  background: var(--regard-background);
}
.rts-light-mood .ens-page-mehdi #regard {
  --regard-background: #fff;
  --regard-text: #141414;
  --regard-muted: #555;
}
.ens-page-mehdi #regard .slide-div {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0;
}
.ens-page-mehdi #regard .swiper-wrapper { align-items: stretch; }
.ens-page-mehdi #regard [data-ens-native-slider] { overflow: clip; }
.ens-page-mehdi #regard .swiper-slide { height: auto; }
.ens-page-mehdi #regard .portfolio-six-single-swiper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
  height: 100%;
  min-height: 620px;
  padding: 64px var(--regard-gutter) 112px;
  background: var(--regard-background);
}
.ens-page-mehdi #regard .left-content {
  position: relative;
  inset: auto;
  top: auto !important;
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: 0;
}
.ens-page-mehdi #regard .left-content .pre-tag { color: var(--regard-muted); }
.ens-page-mehdi #regard .left-content .title {
  color: var(--regard-text);
  margin: 20px 0 24px;
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.12;
}
.ens-page-mehdi #regard .left-content .disc {
  color: var(--regard-muted);
  max-width: 48ch;
  line-height: 1.7;
}
.ens-page-mehdi #regard .learn-more-btn,
.ens-page-mehdi #regard .learn-more-btn i {
  color: var(--regard-text);
  border-color: var(--regard-text);
}
.ens-page-mehdi #regard .right-content {
  display: block;
  width: 100%;
  min-width: 0;
  margin: 0;
}
.ens-page-mehdi #regard .right-content .thumbnail {
  display: block;
  width: 100%;
  height: clamp(350px, 36vw, 580px);
  margin: 0;
}
.ens-page-mehdi #regard .right-content .thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: none;
  object-fit: contain;
  object-position: center;
}
.ens-page-mehdi #regard .ens-native-caption {
  position: static;
  margin: 12px 0 0;
  padding: 0;
  color: var(--regard-muted);
  background: transparent;
  line-height: 1.5;
  text-align: center;
}
.ens-page-mehdi #regard :is(.swiper-button-prev, .swiper-button-next) {
  top: auto;
  bottom: 28px;
  left: auto;
  width: 48px !important;
  min-width: 48px;
  height: 48px;
  margin: 0;
  transform: none;
}
.ens-page-mehdi #regard .swiper-button-next { right: var(--regard-gutter); }
.ens-page-mehdi #regard .swiper-button-prev { right: calc(var(--regard-gutter) + 64px); }
.ens-page-mehdi #regard :is(.swiper-button-prev, .swiper-button-next):hover { transform: none; }
.ens-page-mehdi #regard a:focus-visible,
.ens-page-mehdi #regard button:focus-visible { outline: 2px solid var(--regard-text); outline-offset: 5px; }
@media (max-width: 767px) {
  .ens-page-mehdi #regard .portfolio-six-single-swiper {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    min-height: 0;
    gap: 28px;
    padding: 40px var(--regard-gutter) 104px;
  }
  .ens-page-mehdi #regard .right-content .thumbnail { height: clamp(300px, 88vw, 400px); }
  .ens-page-mehdi #regard .left-content { padding-right: 48px; }
  .ens-page-mehdi #regard .learn-more-btn i { width: 48px; height: 48px; line-height: 48px; }
}
