.video-wrapper {
  text-align: center;
}

iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-width: 500px;
  height: auto;
}

/*----------------------------------------------- HERO section ----------*/

#hero {
  background-image: url("../images/bg-hero.png");
  background-position: 50% 15%;
  background-repeat: no-repeat;
  background-size: 90%;
}

.hero-container {
  margin-top: 33%;
  padding: 50px 2rem;
}

/*----------------------------------------------- EVERBLADE section -----*/

/*----------------------------------------------- MAN OR MANOR section --*/

#manormanor {
  background-color: #000;
}

/*----------------------------------------------- ABOUT US section ------*/

#about {
  background-color: #000;
}

/*----------------------------------------------- Media queries ------*/

@media screen and (min-width: 576px) {
  #hero {
    background-position: 50% 20%;
    background-size: 80%;
  }
}

@media screen and (min-width: 768px) {
  #hero {
    background-size: 50%;
  }
  .hero-container {
    margin-top: 20%;
  }
  #everblade {
    background-image: url("../images/bg-everblade.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
  }
}

@media screen and (min-width: 1200px) {
  #everblade {
    background-position: right;
  }
}