/**
 SASS files that don't get compiled into CSS. Do not put element selectors in here.
 Every file not starting with '_' should import this file if you want to use functions and mixins.
 */
/**
 * SASS variables
 *
 These are only used in the properties and abstract SASS files.
 */
/**
 Breakpoints and columns
 */
/**
 Text
 */
/**
Fill in the header styles, only write the properties you want to override.
 */
/**
  Buttons
 */
/**
 Breakpoints

 @param {Keyword} $breakpoint - The breakpoint name of the minimum width. Can be any of the names in the $breakpoint variable
 */
/**
  Custom column size.
  Especially handy inside other columns.

  @param {Number|string} $size - the size in columns or 'expand'/'shrink'.
  @param {number} $total - the total size in columns. Ignored when size is 'expand'/'shrink'
 */
/**
  Custom offset size.
  Especially handy inside other columns.

  @param {Number|string} $size - the size of the offset.
  @param {number} $total - the total size in columns.
  @param {string} - the side from the offset.
 */
.slideshow__component {
  --slideshow-grid-column-start: 2;
  --slideshow-grid-column: var(--slideshow-grid-column-start) / -2;
  --slideshow-content-grid-columns: 2 / -2;
  margin-bottom: var(--component-margin-bottom);
}
@media (min-width: 992px) {
  .slideshow__component {
    --slideshow-grid-column: var(--slideshow-grid-column-start) / -1;
    --slideshow-content-grid-columns: 2 / 7;
  }
}

.slideshow__wrapper {
  align-items: end;
}

.slideshow__content {
  grid-row: 1;
  grid-column: var(--slideshow-content-grid-columns);
  padding-bottom: 40px;
}
@media (min-width: 768px) {
  .slideshow__content {
    padding-left: var(--swiper-button-size);
  }
}
@media (min-width: 992px) {
  .slideshow__content {
    padding-bottom: var(--swiper-button-size);
    padding-left: 0;
  }
}

.slideshow__component .swiper-buttons {
  grid-column: var(--slideshow-grid-column-start);
  grid-row: 1;
  display: flex;
  position: relative;
  z-index: 1;
}

.slideshow__component .swiper-buttons .swiper-button-prev:not(:hover):not(:focus-visible) {
  --swiper-button-background-color: var(--primary-light-color);
}

.slideshow__inner {
  grid-row: 1;
}

.slideshow__component .swiper-slide {
  width: auto;
}

.slideshow__component .swiper-wrapper {
  align-items: end;
}

.slideshow__inner {
  grid-column: var(--slideshow-grid-column);
  grid-row: 1;
}
@media (min-width: 768px) {
  .slideshow__inner {
    padding-left: var(--swiper-button-size);
  }
}

.swiper-button-lock {
  display: none;
}

@media (min-width: 992px) {
  .slideshow--has-content {
    --slideshow-grid-column-start: 8;
  }
}
.slideshow--has-content .slideshow__inner,
.slideshow--has-content .swiper-buttons {
  grid-row: 2;
}
@media (min-width: 992px) {
  .slideshow--has-content .slideshow__inner,
  .slideshow--has-content .swiper-buttons {
    grid-row: 1;
  }
}

.slide__content .entity__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: first baseline;
  gap: 8px;
  margin-top: 25px;
  margin-bottom: 1px;
}
.slide__content .button--link {
  padding-inline: var(--button-padding-x);
}
.slide__content.swiper-slide-active {
  z-index: 1;
}