@charset "UTF-8";

.youtube-modal {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center
}

.youtube-modal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100lvh;
  background: #00000080
}

.youtube-modal__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
  max-width: 800px
}

@media (max-width: 1440px) {
  .youtube-modal__content {
    max-width: 55.5555555556vw
  }
}

@media (max-width: 1024px) {
  .youtube-modal__content {
    max-width: calc(100% - 5.2083333333vw)
  }
}

@media (max-width: 767px) {
  .youtube-modal__content {
    max-width: calc(100% - 10.6666666667vw)
  }
}

.youtube-modal__close {
  background: none;
  border: none;
  cursor: pointer;
  align-self: flex-end;
  z-index: 2
}

.youtube-modal__close img {
  display: block;
  max-width: 32px
}

@media (max-width: 1440px) {
  .youtube-modal__close img {
    max-width: 2.2222222222vw
  }
}

@media (max-width: 1024px) {
  .youtube-modal__close img {
    max-width: 3.125vw
  }
}

@media (max-width: 767px) {
  .youtube-modal__close img {
    max-width: 6.4vw
  }
}

.youtube-modal__iframe-wrapper {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 16/9;
  overflow: hidden;
  margin: 0 auto
}

@media (max-width: 1440px) {
  .youtube-modal__iframe-wrapper {
    max-width: 55.5555555556vw
  }
}

@media (max-width: 1024px) {
  .youtube-modal__iframe-wrapper {
    max-width: 100%
  }
}

.youtube-modal__iframe-wrapper iframe {
  width: 100%;
  height: 100%
}

.youtube-modal__iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block
}