/* ---------- variable ---------- */
@import url("https://redtoucan-admin.azurewebsites.net/media/uvdovbjb/variable.css");

/* ---------- mobile ---------- */
.youtube-wrapper {
  position: relative;
  display: block;
}

.youtube-wrapper .youtube-container {
  max-width: var(--section-container-width);
  margin: 0 auto;
}

.youtube-wrapper .youtube-container iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* ---------- tablet ---------- */
@media screen and (min-width: 48rem) {
  .youtube-wrapper .youtube-container {
    padding: 0 2rem;
  }
}

/* ---------- desktop ---------- */
@media screen and (min-width: 62rem) {
  .youtube-wrapper {
    margin-top: -4rem;
  }

  .youtube-wrapper .youtube-container {
    padding: 0;
  }
}