/**
 * Use in order to make a set of rules only apply above
 * or below a certain breakpoint.
 * Standard usage:

 @include breakpoint(tablet){
 	// Applies to screen sizes tablet and LARGER
 }

 @include breakpoint(tablet up){
 	// Applies to screen sizes tablet and LARGER
 }

 @include breakpoint(tablet down){
 	// Applies to screen sizes tablet and SMALLER
 }
 *
 **/
/**
 * Set custom typography sizes (e.g. header)
 * @param  {int} $size        font-size
 * @param  {int} $line-height line-height
 * @param  {int} $av          AV letter-spacing from XD
 * @return {void}
 */
/**
 * Converts a pixel, percentage, rem or em value to a unitless value based on a given font size. Ideal for working out unitless line heights.
 *
 * @param {Number} $value - Value to convert to a unitless line height
 * @param {Number} $base - The font size to use to work out the line height - defaults to $rem-font-size
 *
 * @return {Number} - Unitless number
 */
/**
 * AV letter spacing measurement convertor from Adobe applications
 * https://scotch.io/tutorials/converting-photoshop-letter-spacing-to-css
 */
.wp-block-sht-carousel {
  --carousel--aspect-ratio: 3/2;
  overflow: hidden;
  max-width: calc(100% + 2 * var(--c-constraint-padding-side));
  width: calc(100% + 2 * var(--c-constraint-padding-side));
  margin-left: calc(-1 * var(--c-constraint-padding-side));
  width: 100%;
  max-width: var(--constraint-full);
  margin-left: auto;
  margin-right: auto;
}
.wp-block-sht-carousel .swiper-slide {
  aspect-ratio: var(--carousel--aspect-ratio);
  background-color: var(--wp--preset--color--blue-5);
}
.wp-block-sht-carousel__container {
  position: relative;
}
.wp-block-sht-carousel__figure {
  aspect-ratio: var(--carousel--aspect-ratio);
}
.wp-block-sht-carousel__figurewrap {
  aspect-ratio: var(--carousel--aspect-ratio);
  overflow: hidden;
}
.wp-block-sht-carousel__image {
  object-position: center;
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.wp-block-sht-carousel__navigation {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
.wp-block-sht-carousel__navigation-button {
  --swiper-navigation-size: 2.25rem;
  width: var(--swiper-navigation-size) !important;
  height: var(--swiper-navigation-size) !important;
}
.wp-block-sht-carousel__navigation-button::after {
  content: "" !important;
  width: 100%;
  height: 100%;
  background: url("../../../img/icons/button-arrow-white.min.svg") center/contain no-repeat;
  filter: drop-shadow(0 0 1rem rgba(0, 0, 0, 0.25)) drop-shadow(0 0 0.125rem rgba(0, 0, 0, 0.25));
}
.wp-block-sht-carousel__navigation-button.swiper-button-next {
  right: 2rem;
}
.wp-block-sht-carousel__navigation-button.swiper-button-prev {
  left: 2rem;
}
.wp-block-sht-carousel__navigation-button.swiper-button-prev::after {
  transform: rotate(180deg);
}