/* Styles for above the fold content on the home page */
.sub-grid-content-home-page {
  grid-template-columns: 50% 50%;
  row-gap: 5rem;
}
/* Explicit placement for each section in the home page's 2-column body grid -
   needed because the lyrics section's image/text pair is deliberately listed
   text-first in the markup (for reading/tab order) despite rendering
   image-first visually, so plain grid auto-placement can't be relied on. */
.home-grid-col-1 {
  grid-column: 1;
}
.home-grid-col-2 {
  grid-column: 2;
}
.home-grid-row-1 {
  grid-row: 1;
}
.home-grid-row-2 {
  grid-row: 2;
}
.home-grid-row-3 {
  grid-row: 3;
}
.home-grid-row-4 {
  grid-row: 4;
}
.home-grid-row-5 {
  grid-row: 5;
}
.home-grid-row-6 {
  grid-row: 6;
}
/* Below desktop widths only - at desktop, base.less's .sub-grid-content h2 rule sizes
   these headings/links instead (52px), so this rule is scoped to not compete with it. */
@media only screen and (width <= 1023px) {
  .sub-grid-content-home-page h2,
  .sub-grid-content-home-page a {
    font-size: 28px;
  }
}
.main-grid-image {
  display: block;
  height: 40vh;
  width: 100%;
  object-fit: contain;
}
.main-grid-image:hover {
  transform: scale(1.1);
}
.hero {
  height: 100vh;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "ohMaria01", "ohMaria02", sans-serif;
}
.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80%;
}
.hero-content h1 {
  font-size: 10vw;
}
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 aspect ratio - adjust as needed */
  height: 0;
  overflow: hidden;
  width: 100%;
}
.video-container lite-youtube {
  margin: auto;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.sub-content {
  flex-grow: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20px;
}
/* The "rock with us" repeat in the home page's grid body, so it doesn't stretch to fill its grid row */
.sub-content-compact {
  height: 80%;
}
/* For desktop displays */
@media only screen and (width >= 1024px) {
  .hero-content h1 {
    font-size: 10vh;
  }
}
.scroll-graphic {
  font-size: 20px;
  flex-grow: 2;
  display: flex;
  align-items: center;
  padding-top: 20px;
}
.scroll-graphic img {
  width: 3vw;
}
/* Rock-with-us CTA in the home hero and its repeat further down the home page */
.anchor-button-compact {
  height: 75px;
}
/* For desktop displays */
@media only screen and (width >= 1024px) {
  .scroll-graphic {
    font-size: 2vw;
  }
  .scroll-graphic img {
    width: 2vw;
  }
}