@charset "UTF-8";
/*  |> BREAKPOINTS BOOSTRAP
——————————————————————————————————————————————————————*/
/*————————————————————————————————————————————————————*\
    ●❱ MIXINGS
\*————————————————————————————————————————————————————*/
/** Based in: https://codepen.io/MadeByMike/pen/vNrvdZ?editors=0110 */
/*————————————————————————————————————————————————————*\
    ●❱ SHORTHANDS MIXINS HELPERS
\*————————————————————————————————————————————————————*/
.media-reel {
  position: relative;
}
.media-reel__title {
  font-size: 4rem;
  /*  |> Unit check
  ——————————————————————————————————————————————————————*/
  /*  |> Convert screen sizes for media queries to 'em'
  ——————————————————————————————————————————————————————*/
  /** @see https://zellwk.com/blog/media-query-units/ */
  /** If we use 'rem', we convert them to 'em' */
  /** If we use 'px', we convert them to 'em' */
}
.media-reel__title {
  font-size: 2.5rem !important;
  /*-clean-css ignore:start */
  min-width: 0vw;
  /*-clean-css ignore:end */
}
@media screen and (min-width: 36em) {
  .media-reel__title {
    font-size: calc(4.6296296296vw + 0.8333333333rem) !important;
  }
}
@media screen and (min-width: 90em) {
  .media-reel__title {
    font-size: 5rem !important;
  }
}
.media-reel__title {
  color: #23325a;
  text-align: center;
  padding-inline: 2.5rem;
  margin-bottom: 0;
}
.media-reel__item {
  text-align: center;
}
.media-reel__item-video-wrp {
  position: relative;
}
.media-reel__item-video-wrp + * {
  margin-top: 1rem;
}
.media-reel__item-video-wrapper {
  position: relative;
}
.media-reel__item-video-wrapper::before {
  --size: 100%;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--size);
  height: var(--size);
  transform: translate(-50%, -50%);
  pointer-events: none;
  outline: 9px solid transparent;
  opacity: 0.3;
  border-radius: 0.5rem;
}
.media-reel__item-video {
  width: 100%;
  aspect-ratio: 300/472;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.5rem;
  transition: 0.3s aspect-ratio;
  display: block;
  position: relative;
}
@media screen and (max-width: 47.9375em) {
  .media-reel__item-video {
    aspect-ratio: 300/400;
  }
}
.media-reel__item-video-mute {
  --size: 2.5rem;
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  width: var(--size);
  height: var(--size);
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.3s;
}
.media-reel__item-video-mute:hover, .media-reel__item-video-mute:focus {
  background: rgb(0, 0, 0);
}
.media-reel__item-video-mute img {
  width: 1.1em;
  height: 1.1em;
  fill: white;
  transition: fill 0.3s;
  filter: invert(1);
}
.media-reel__item-title {
  /*  |> Unit check
  ——————————————————————————————————————————————————————*/
  /*  |> Convert screen sizes for media queries to 'em'
  ——————————————————————————————————————————————————————*/
  /** @see https://zellwk.com/blog/media-query-units/ */
  /** If we use 'rem', we convert them to 'em' */
  /** If we use 'px', we convert them to 'em' */
}
.media-reel__item-title {
  font-size: 1.25rem !important;
  /*-clean-css ignore:start */
  min-width: 0vw;
  /*-clean-css ignore:end */
}
@media screen and (min-width: 36em) {
  .media-reel__item-title {
    font-size: calc(0.462962963vw + 1.0833333333rem) !important;
  }
}
@media screen and (min-width: 90em) {
  .media-reel__item-title {
    font-size: 1.5rem !important;
  }
}
.media-reel__item-title {
  margin-bottom: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: black;
}
@media screen and (max-width: 47.9375em) {
  .media-reel__item-title {
    -webkit-line-clamp: 2;
  }
}
.media-reel__item-link {
  /*  |> Unit check
  ——————————————————————————————————————————————————————*/
  /*  |> Convert screen sizes for media queries to 'em'
  ——————————————————————————————————————————————————————*/
  /** @see https://zellwk.com/blog/media-query-units/ */
  /** If we use 'rem', we convert them to 'em' */
  /** If we use 'px', we convert them to 'em' */
}
.media-reel__item-link {
  font-size: 1.125rem;
  /*-clean-css ignore:start */
  min-width: 0vw;
  /*-clean-css ignore:end */
}
@media screen and (min-width: 36em) {
  .media-reel__item-link {
    font-size: calc(0.2314814815vw + 1.0416666667rem);
  }
}
@media screen and (min-width: 90em) {
  .media-reel__item-link {
    font-size: 1.25rem;
  }
}
.media-reel__item-link {
  padding: 1rem 1.5rem 0.65rem;
  background: var(--ml-btn-bg, #f5b325);
  display: inline-block;
  border-radius: 0.5rem;
  text-decoration: none;
  color: var(--ml-btn-text, black);
  text-transform: uppercase;
  margin-top: 0.5rem;
  margin-inline: auto;
  transition: all 0.3s;
  visibility: hidden;
  opacity: 0;
}
.media-reel__item-link:hover, .media-reel__item-link:focus {
  filter: brightness(0.9);
  color: var(--ml-btn-text, black);
}
@media screen and (max-width: 47.9375em) {
  .media-reel__item-link {
    padding: 0.6rem 1.1rem 0.35rem;
  }
}
.media-reel__loading {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: linear-gradient(100.45deg, #FFFFFF -4.2%, #E7E7E7 110.15%);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: 0.5s;
  pointer-events: none;
  visibility: hidden;
}
.media-reel__loading-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.media-reel__loading-content .text {
  font-size: 2rem;
  position: relative;
  top: 0.25rem;
}
.swiper:not(.swiper-initialized) + .media-reel__loading {
  opacity: 1;
  visibility: visible;
}
.media-reel .swiper,
.media-reel .swiper-wrapper {
  aspect-ratio: 1450/650;
}
@media screen and (max-width: 80em) {
  .media-reel .swiper,
  .media-reel .swiper-wrapper {
    aspect-ratio: 1450/800;
  }
}
@media screen and (max-width: 64em) {
  .media-reel .swiper,
  .media-reel .swiper-wrapper {
    aspect-ratio: 1450/1080;
  }
}
@media screen and (max-width: 47.9375em) {
  .media-reel .swiper,
  .media-reel .swiper-wrapper {
    aspect-ratio: 750/1080;
  }
}
.media-reel .swiper-wrapper {
  align-items: center !important;
}
.media-reel .swiper-slide {
  height: auto;
}
.media-reel .swiper-slide-active video {
  aspect-ratio: 300/594;
}
@media screen and (max-width: 47.9375em) {
  .media-reel .swiper-slide-active video {
    aspect-ratio: 300/500;
  }
}
.media-reel .swiper-slide-active .media-reel__item-video-wrapper::before {
  background: var(--ml-primary, #f5b325);
  outline-color: var(--ml-primary, #f5b325);
}
.media-reel .swiper-slide-active .media-reel__item-link {
  visibility: visible;
  opacity: 1;
}
.media-reel .swiper-button-next,
.media-reel .swiper-button-prev {
  --swiper-navigation-size: 1rem;
  --swiper-navigation-sides-offset: calc(50% - 12rem);
  --size: 2.5rem;
  width: var(--size);
  height: var(--size);
  background: white;
  border-radius: 50%;
  border: 1px solid var(--ml-primary, #f5b325);
  transition: 0.3s;
  color: #23325A;
}
.media-reel .swiper-button-next:hover, .media-reel .swiper-button-next:focus,
.media-reel .swiper-button-prev:hover,
.media-reel .swiper-button-prev:focus {
  filter: brightness(0.9);
}
@media screen and (min-width: 47.93875em) {
  .media-reel .swiper-button-next,
  .media-reel .swiper-button-prev {
    --swiper-navigation-top-offset: calc(100% - 3rem);
  }
}
.media-reel .swiper-button-next::before,
.media-reel .swiper-button-prev::before {
  --size: 100%;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--size);
  height: var(--size);
  transform: translate(-50%, -50%);
  background: var(--ml-primary, #f5b325);
  opacity: 0.3;
  border-radius: 50%;
  z-index: -1;
}/*# sourceMappingURL=media-reel.css.map */