/*!*********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./assets/src/blocks/acf/block-video/style.scss ***!
  \*********************************************************************************************************************************************************************************************************************************************************************/
/**
 * Container query mixin
 * @param {string|number|list} $value - The breakpoint value.
 * @param {string} $mode - The mode (up or down).
 * @param {string} $name - The name of the container.
 * @example @include container(lg)
 */
/**
 * Icon font mixin
 * @param {string} $content - The icon name.
 * @param {number} $font-size - The font size.
 * @example @include icon-font("arrow-right")
 */
@layer partials {
  .video {
    position: relative;
    container-type: inline-size;
    z-index: 2;
  }
  .video__container {
    padding-block: 5rem 3rem;
    background-color: var(--g-color-light-400);
  }
  @container ((width >= 992px)) {
    .video__container {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 5rem;
      padding-block: 10rem;
    }
  }
  .video__heading {
    margin-bottom: 2rem;
    font-size: 2.8rem;
    line-height: normal;
    letter-spacing: -0.084rem;
  }
  @container ((width >= 992px)) {
    .video__heading {
      grid-area: 1/1/2/2;
      margin-bottom: 0;
      font-size: 4.4rem;
      line-height: 1.3636;
      letter-spacing: -0.132rem;
    }
  }
  .video__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-self: center;
    width: 100%;
    margin: 0;
    padding: 0;
    border-radius: 1rem;
    overflow: hidden;
  }
  @container ((width >= 992px)) {
    .video__media {
      grid-area: 2/1/3/3;
    }
  }
  .video__media-play {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    cursor: pointer;
    transition-property: opacity, visibility;
    transition-duration: var(--g-easing-duration-default);
    transition-timing-function: var(--g-easing-hover);
    z-index: 2;
  }
  @media (hover: hover) and (pointer: fine) {
    .video__media-play:hover::before {
      transform: translate(-50%, -50%) scale(1.1);
    }
  }
  .video__media-play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6rem;
    aspect-ratio: 1/1;
    background: url(../../../images/icon-play.svg) no-repeat center center/contain;
    transform: translate(-50%, -50%);
    transition-property: transform;
    transition-duration: var(--g-easing-duration-default);
    transition-timing-function: var(--g-easing-hover);
  }
  @container ((width >= 992px)) {
    .video__media-play::before {
      width: 8.4rem;
    }
  }
  .video__media-play.-hidden {
    opacity: 0;
    visibility: hidden;
  }
  .video__media-play img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
  }
  .video__media-player {
    position: relative;
    display: flex;
    width: 100%;
  }
  .video__media-player iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
  }
  .video__logotypes {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 3.8rem;
  }
  @container ((width >= 992px)) {
    .video__logotypes {
      grid-area: 1/2/2/3;
      justify-content: flex-end;
      margin-top: 0;
    }
  }
  @container ((width >= 1200px)) {
    .video__logotypes {
      gap: 2.8rem;
    }
  }
  .video__logotype {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.6rem;
    aspect-ratio: 1/1;
    margin: 0;
  }
  @container ((width >= 992px)) {
    .video__logotype {
      width: 5.6rem;
    }
  }
  .video__logotype img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
    -o-object-position: center;
       object-position: center;
  }
}

/*# sourceMappingURL=style-index.css.map*/