/*
A simple little SCSS mixin for creating scrim gradients
Inspired by Andreas Larson - https://github.com/larsenwork
https://css-tricks.com/easing-linear-gradients/
*/
/* HIGHTLIGHT GRID STYLE - reusable - for FacetWp */
/* Manage skip to next section link */
.opd-card-slider-section {
  --accessible-hidden-text-focusable-bg: #ffffff;
}

/* FULLBLEED RIGHT SIDE - MANAGE SPACING AND ALIGNMENT */
.opd-slider-fullbleed-right-side-container .slick-slider .slick-track {
  margin-left: 0; /* manage left spacing when elements are less than 4 */
}

/* ------------------------------------ *\
  #SLIDER-CARDS
\* ------------------------------------ */
/* Multiple slides */
.slick-slider.opd-slider--cards {
  padding-bottom: calc(var(--_slider-arrow-size) * 1.5);
}
.slick-slider.opd-slider--cards .slick-track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--_slider-slide-gap);
}
.slick-slider.opd-slider--cards .slick-arrow {
  top: unset;
  bottom: calc(var(--_slider-arrow-size) / 2 * -1);
}
.slick-slider.opd-slider--cards .slick-prev + .slick-next {
  margin-left: calc(var(--_slider-arrow-size) + 0.625rem);
}

/* ------------------------------------ *\
  #MEDIA-QUERIES
\* ------------------------------------ */
@media all and (min-width: 568px) {
  .slick-slider.opd-slider--cards {
    --slider-slide-gap: 1.25rem;
  }
}
@media all and (min-width: 768px) {
  /* Manage slide right side fullbleed */
  .opd-slider-fullbleed-right-side-container {
    display: grid;
    grid-template-columns: 1fr minmax(768px, 1147px) 1fr;
    grid-template-areas: "margin content content";
  }
  .opd-slider-fullbleed-right-side-container .slick-slider.opd-slider {
    grid-area: content;
  }
}
@media all and (min-width: 1147px) {
  .opd-slider-fullbleed-right-side-container .slick-slider.opd-slider {
    margin-left: calc(var(--_slider-slide-gap) * -1); /* compensate left flex gap */
  }
}