body{
  &:has(.intro){
    overflow-x: hidden;
    overflow-y: hidden;
    height: 100vh;
  }
  &:has(.intro.fade-out){
    overflow-x: hidden;
    height: auto;
  }
}

.intro{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #E60012;
  z-index: 2147483647;
  .red-logo{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: auto;
    filter: invert(1);
    opacity: 1;
    /* animation: intro-logo 400ms ease-in-out forwards; */
  }
}

.intro.fade-out{
  /* transform: translateX(100%);
  transition: transform 600ms ease-in-out; */
  animation: intro-fade-out 400ms ease-in-out forwards;
  .red-logo{
    opacity: 1;
    animation: logo-fade-out 400ms ease-in-out forwards;
  }
}

/* @keyframes intro-logo {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
} */

@keyframes intro-fade-out {
  0% {
    width: 100%;
    left: auto;
    right: 0;
  }
  100% {
    width: 0;
    left: auto;
    right: 0;
  }
}

@keyframes logo-fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.youtube-wrapper{
  .youtube{
    /* aspect-ratio: 1600 / 556; */
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    object-fit: cover;
    &.pattern-2{
      height: 556px;
    }
    iframe{
      width: 100%;
      height: 100%;
      object-fit: cover;
      pointer-events: none;
    }
  }
}