/*

- Add icon variables here, f.e.

$icon-check: '<svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 11.2 3.4 7.6 2 9l5 5 9-9-1.4-1.4z" fill="currentColor"/></svg>';


- This variables can be used like this:

.className {
  background-image: background-icon($icon-check, $primary-color-1);
}

*/
/*

- Add icon variables here, f.e.

$icon-check: '<svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 11.2 3.4 7.6 2 9l5 5 9-9-1.4-1.4z" fill="currentColor"/></svg>';


- This variables can be used like this:

.className {
  background-image: background-icon($icon-check, $primary-color-1);
}

*/
.snk-slider-track {
  border-top: 1px solid;
}
.snk-slider--preview .snk-slide {
  display: none;
}
.snk-slider--preview .snk-slide:first-child {
  display: block;
  width: 100%;
}
.snk-slider-heading {
  margin-bottom: var(--slider-heading-mb, 1.5rem);
}
.snk-slider-heading:last-child {
  margin-bottom: 0;
}
.snk-slider-heading h1:last-child,
.snk-slider-heading h2:last-child,
.snk-slider-heading h3:last-child,
.snk-slider-heading h4:last-child,
.snk-slider-heading h5:last-child,
.snk-slider-heading h6:last-child,
.snk-slider-heading p:last-child,
.snk-slider-heading ol:last-child,
.snk-slider-heading ul:last-child {
  margin-bottom: 0;
}
.snk-slider .splide__arrows {
  transform-origin: center;
  display: flex;
  position: relative;
  gap: 1rem;
  margin-bottom: 2rem;
}
.snk-slider .splide__arrow {
  position: relative;
  transform: none;
  left: auto;
  right: auto;
}
.snk-slider .splide__pagination {
  position: static;
  transform: none;
  margin-top: var(--slider-paginantion-mt, 1.5rem);
}

.snk-slide {
  padding-top: var(--slide-pt, 16px);
  display: flex;
  flex-direction: column;
}
.snk-slide-text {
  margin-bottom: var(--slide-text-gap, 24px);
}
.snk-slide-text:last-child {
  margin-bottom: 0;
}
.snk-slide-media {
  margin-bottom: 0;
  margin-top: auto;
}
.snk-slide-sideWrapper {
  display: flex;
  flex-direction: var(--slide-side-direction, row-reverse);
  gap: var(--slide-side-gap, 0.5rem);
  --slide-image-aspect: 1;
}
.snk-slide-sideElement {
  color: #eaeaea;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}
.snk-slide-sideElement svg {
  color: inherit;
}
.snk-section_bgGray .snk-slide-sideElement {
  color: #fff;
  --slide-image-bg: #fff;
}
.snk-slide-image {
  aspect-ratio: var(--slide-image-aspect, 16/10);
  object-position: var(--slide-image-pos, center);
  object-fit: cover;
  background-color: var(--slide-image-bg, #eaeaea);
  width: 100%;
}
.snk-slide-media .col-12:only-child .snk-slide-image {
  aspect-ratio: var(--slide-image-aspect, 16/8);
}
.snk-slide:only-child {
  max-width: 100%;
}

.snk-slider {
  --slider-headin-mb: 1.5rem;
}
@media (max-width: 1023.98px) {
  .snk-slider .snk-slide-media .row {
    --snk-gutter-y: clamp(1rem, 0.5vw, 2.5rem);
  }
  .snk-slider .snk-slide-sideWrapper .snk-slide-image {
    width: calc(50% - var(--slide-side-gap, 0.5rem) * 0.5);
  }
}
@media (min-width: 1024px) {
  .snk-slider {
    --slide-side-direction: column;
  }
}
@media (min-width: 768px) {
  .snk-slider {
    --slide-text-gap: 2rem;
    --slide-pt: 1.5rem;
    --slide-side-gap: 1.25rem;
    --slider-arrows-gap: 0.25rem;
    --slider-headin-mb: 2.25rem;
    --slider-paginantion-mt: 2rem;
  }
  .snk-slider .splide__arrows {
    gap: 4px;
    position: absolute;
    right: 0;
    transform: translate3d(0, -100%, 0);
    padding-bottom: var(--slider-heading-mb, 1.5rem);
  }
}
@media (min-width: 1024px) {
  .snk-slider, .snk-slider-heading {
    --slide-text-gap: 3rem;
    --slider-heading-mb: 3rem;
    --slider-paginantion-mt: 2.5rem;
  }
}