header {
  position: relative; height: 12rem; overflow: hidden;
  background-image: url("/public/img/footer.webp");
  background-size: 5rem;
  align-content: center;
  padding: 1rem 0 1rem 10%; box-sizing: border-box;
  >*{ position:relative;}
  h1 {
    color: var(--white); padding: 0; line-height: 1.15; font-size: 2.5rem;
    em { display: block; font-size: 5rem; font-weight: bold;}
  }
  &::before {
    content:''; width: 30rem;
    aspect-ratio: 1/1; display: block;
    opacity: 0.25; position: absolute;
    right: -3rem; top: -9rem;
    background-image: url("/public/img/now.webp");
    background-size: 100%; rotate: 15deg;
  }
}

main {
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1rem 2rem;
  article, details {
    h2 {margin: 0;}
    summary>h2 {display: inline;}
  }
}
@media screen and (max-width: 30rem) {
  header {
    height: 10rem;
    h1 {
      font-size: 2rem;
      em {font-size: 4rem;}
    }
    &::before {
      width: 22rem; right: -8%; top: -6rem;
    }
  }
  main {
    padding: 1rem;
  }
}
@media screen and (min-width: 40rem) {
  header {
    padding-left: 12%; height: 14rem;
    h1 {
      font-size: 3rem; line-height: 1.05;
      em {font-size: 6rem;}
    }
    &::before {
      width: 32rem; right: 4rem; top: -9rem;
    }
  }
  main {
    padding: 1rem 10%;
  }
}
@media screen and (min-width: 67rem) {
  header {
    padding-left: 22%; height: 16rem;
    h1 {
      line-height: 1;
      em {font-size: 7rem;}
    }
    &::before {
      width: 38rem; right: 11rem; top: -11rem;
    }
  }
  main {
    padding: 1rem 20%;
  }
}