.lesson-page {
  --lesson-gold: #c8aa72;
  --lesson-gold-deep: #815000;
  --lesson-blue: #062f47;
  overflow: hidden;
  color: #152d3b;
  background: linear-gradient(100deg, #eef8ff 10%, #fff9eb 92%);
}

.lesson-container { width: min(100% - 2.5rem, 71.25rem); margin-inline: auto; }
.lesson-page :is(h1:where(:not([data-heading-display])), :where([data-heading-display="1"])), .lesson-page :is(h2:where(:not([data-heading-display])), :where([data-heading-display="2"])), .lesson-page :is(h3:where(:not([data-heading-display])), :where([data-heading-display="3"])), .lesson-page :is(h4:where(:not([data-heading-display])), :where([data-heading-display="4"])), .lesson-page :is(h5:where(:not([data-heading-display])), :where([data-heading-display="5"])) { line-height: 1.25; }
.lesson-page p { line-height: 1.65; }

.lesson-breadcrumb {
  padding: .3125rem max(1rem, calc((100vw - 75rem) / 2));
  border-bottom: 1px solid #29231c;
  color: #d8c5a8;
  background: #000;
  font-size: .72rem;
}
.lesson-breadcrumb a { color: inherit; text-decoration: none; }

.lesson-page-title { padding: .75rem 0; background: linear-gradient(100deg, #e8f5ff, #fff4d9); }
.lesson-page-title .lesson-container,
.lesson-title-band .lesson-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
}
.lesson-page-title img { width: 3.25rem; height: 3.25rem; object-fit: contain; }
.lesson-page-title :is(h1:where(:not([data-heading-display])), :where([data-heading-display="1"])) { color: var(--lesson-blue); font-size: clamp(1rem, 2vw, 1.25rem); }

.lesson-hero {
  display: grid;
  min-height: 18rem;
  place-items: center;
  padding: 4rem 1.25rem;
  color: #fff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}
.lesson-page--children-lessons .lesson-hero:not(.lesson-hero--improvisation) {
  background-image: linear-gradient(rgba(45, 45, 45, .62), rgba(45, 45, 45, .62)), url("/assets/images/lesson/children-lesson-hero.jpg");
}
.lesson-page--adult-lessons .lesson-hero:not(.lesson-hero--improvisation) {
  background-position: bottom right;
  background-image: linear-gradient(rgba(45, 45, 45, .72), rgba(45, 45, 45, .72)), url("/assets/images/lesson/adult-lesson-hero.jpg");
}
.lesson-hero .lesson-container { max-width: 62rem; }
.lesson-hero :is(h2:where(:not([data-heading-display])), :where([data-heading-display="2"])), .lesson-hero :is(h3:where(:not([data-heading-display])), :where([data-heading-display="3"])) { margin: .75rem 0; text-transform: uppercase; }
.lesson-hero :is(h2:where(:not([data-heading-display])), :where([data-heading-display="2"])) { font-size: clamp(1.65rem, 4vw, 2.7rem); }
.lesson-hero :is(h3:where(:not([data-heading-display])), :where([data-heading-display="3"])) { font-size: clamp(1rem, 2.2vw, 1.45rem); }

.lesson-grid { display: grid; gap: 2rem; }
.lesson-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lesson-features { padding: 3.5rem 0; }
.lesson-features article {
  display: grid;
  min-height: 13rem;
  place-items: center;
  align-content: center;
  padding: 2rem;
  border-radius: .75rem;
  background: rgba(255, 255, 255, .72);
  box-shadow: 0 .5rem 1.4rem rgba(5, 30, 46, .09);
  text-align: center;
}
.lesson-features img, .lesson-improvisation-feature img { width: 3.25rem; height: 3.25rem; object-fit: contain; }
.lesson-features :is(h3:where(:not([data-heading-display])), :where([data-heading-display="3"])), .lesson-features :is(h4:where(:not([data-heading-display])), :where([data-heading-display="4"])) { margin: .75rem 0 .25rem; color: var(--lesson-blue); }
.lesson-features p { margin: 0; color: #805000; }

.lesson-title-band {
  padding: .75rem 0;
  color: #fff;
  background: linear-gradient(180deg, #171717, #c8aa6e);
  box-shadow: 0 .65rem 1.2rem rgba(0, 0, 0, .22);
}
.lesson-title-band img { width: 3.25rem; height: 3.25rem; object-fit: contain; }
.lesson-title-band :is(h2:where(:not([data-heading-display])), :where([data-heading-display="2"])), .lesson-title-band :is(h3:where(:not([data-heading-display])), :where([data-heading-display="3"])) { font-size: 1rem; text-transform: uppercase; }

.lesson-pricing { padding: 3rem 0 2rem; }
.lesson-pricing article {
  padding: 2.5rem 1rem;
  border: 1px solid #d4b77e;
  border-radius: .75rem;
  background: rgba(255, 255, 255, .65);
  text-align: center;
}
.lesson-pricing :is(h5:where(:not([data-heading-display])), :where([data-heading-display="5"])) { margin: 0; color: var(--lesson-gold-deep); font-size: clamp(1.5rem, 3vw, 2.25rem); }
.lesson-primary-cta { padding: 0 1.25rem 3rem; text-align: center; }
.lesson-button {
  display: inline-block;
  padding: .8rem 1.6rem;
  border: 1px solid #5c3e18;
  border-radius: .5rem;
  color: #111;
  background: #d2b580;
  font-weight: 700;
  text-decoration: none;
}

.lesson-hero--improvisation { min-height: 17rem; }
.lesson-page--children-lessons .lesson-hero--improvisation {
  background-image: linear-gradient(rgba(45, 45, 45, .86), rgba(45, 45, 45, .86)), url("/assets/images/lesson/children-improvisation-hero.jpg");
}
.lesson-page--adult-lessons .lesson-hero--improvisation {
  background-image: linear-gradient(rgba(45, 45, 45, .84), rgba(45, 45, 45, .84)), url("/assets/images/lesson/adult-improvisation-hero.webp");
}
.lesson-hero--improvisation :is(h2:where(:not([data-heading-display])), :where([data-heading-display="2"])), .lesson-hero--improvisation :is(h3:where(:not([data-heading-display])), :where([data-heading-display="3"])) { max-width: 62rem; margin-inline: auto; }
.lesson-improvisation-feature { padding: 3rem 0; text-align: center; }
.lesson-improvisation-feature :is(h4:where(:not([data-heading-display])), :where([data-heading-display="4"])) { margin: .7rem 0 .25rem; color: var(--lesson-blue); }
.lesson-improvisation-feature p { margin: 0; color: var(--lesson-gold-deep); }

.lesson-flowkey-logo { padding: 2rem; background: #454545; text-align: center; }
.lesson-flowkey-logo img { width: 8rem; height: 8rem; object-fit: contain; }
.lesson-flowkey-promo { padding: 3.5rem 0; text-align: center; }
.lesson-flowkey-promo p { margin: 0 0 2rem; font-size: 1.05rem; }
.lesson-flowkey-promo__images { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-bottom: 2rem; }
.lesson-flowkey-promo__images img { width: 100%; aspect-ratio: 16 / 10; border-radius: .6rem; object-fit: cover; box-shadow: 0 .5rem 1.1rem rgba(0, 0, 0, .2); }

.lesson-closing { padding: 2.4rem 1rem; color: var(--lesson-gold); background: #000; text-align: center; }
.lesson-closing img { width: 7.5rem; height: auto; }
.lesson-closing :is(h2:where(:not([data-heading-display])), :where([data-heading-display="2"])) { margin: 1rem 0 0; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }

@media (max-width: 48rem) {
  .lesson-container { width: min(100% - 2rem, 42rem); }
  .lesson-grid--2 { grid-template-columns: 1fr; }
  .lesson-hero { min-height: 21rem; padding: 3rem 1rem; }
  .lesson-features { padding: 2rem 0; }
  .lesson-features article { min-height: 0; }
  .lesson-flowkey-promo__images { grid-template-columns: 1fr; }
}

@media (max-width: 30rem) {
  .lesson-page-title .lesson-container, .lesson-title-band .lesson-container { flex-direction: column; gap: .35rem; }
  .lesson-page-title { padding: .6rem 0; }
  .lesson-hero { min-height: 18rem; }
  .lesson-pricing { padding: 2rem 0 1.5rem; }
  .lesson-pricing article { padding: 1.5rem 1rem; }
  .lesson-closing :is(h2:where(:not([data-heading-display])), :where([data-heading-display="2"])) { font-size: .68rem; }
}