/* Add custom CSS styles below */ 
.s-block {
  margin-top: 2rem !important;
}

/* 1. Fixed image banner */
.banner.banner--fixed {
  width: 100% !important;
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Smaller size for image inside banner */
.banner.banner--fixed img {
  max-width: 100% !important;
  height: auto !important;
  max-height: 600px !important; /* reduce height */
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

/* Container restriction for fixed banner */
.s-block--fixed-banner .container {
  max-width: 1000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* 2. YouTube video embed */
.s-block--video .container {
  max-width: 1000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
    max-height: 600px !important; /* reduce height 
}

.videoWrapper,
lite-youtube {
  aspect-ratio: 16 / 9;
  max-width: 100% !important;
  height: auto !important;
  max-height: 400px !important; /* reduce height */
  display: block;
  margin: 0 auto;
}

/* Larger screens: allow a bit more space */
@media (min-width: 1600px) {
  .s-block--fixed-banner .container,
  .s-block--video .container {
    max-width: 1200px !important;
  }

  .banner.banner--fixed img {
    max-height: 250px !important;
  }

  lite-youtube {
    max-height: 450px !important;
  }
}