@layer layouts {
  #hero {
    position: relative;
    &::after {
      content: "";
      display: block;
      position: absolute;
      inset: 0 0 calc(.5 * 9 / 16 * min(900px, 100vw - 4rem) + 4rem) 0;
      z-index: -1;
      background: linear-gradient(120deg,
        var(--theme-gradient-start) 33%,
        var(--theme-gradient-end)
      );
    }
    h1 {
        margin: 1.5em auto 1em;
        font-size: clamp(1.8rem, 7vw - .3rem, 3.7rem);
        text-align: center;
    }
    video-player {
      --accent-color: var(--theme-main-dark);
      display: block;
      aspect-ratio: 16 / 9;
      width: min(100%, 900px);
      margin: 0 auto;
      overflow: hidden;
      background-color: white;
      box-shadow: 0rem -1rem 6rem -4rem var(--theme-main-dark);
      &:not(:fullscreen){ border-radius: .5rem; }
      img {
        width: 100%;
        height: auto;
      }
    }
  }

  #panel {
    display: grid;
    grid: auto 1fr / 1fr 2fr;
    gap: 4rem 2rem;
    padding: 4rem max((100% - 1200px) / 2 + 2rem, 2rem);
    font-size: 1.1rem;
  }

  #info {
    display: block;
    padding: 0;
    margin: 0;
    dt {
      display: inline-block;
      margin: .4rem 0;
      font-weight: 600;
    }
    dd {
      display: inline;
      margin: .4rem 0;
    }
    dd::after {
      content: "";
      display: block;
      height: 0;
    }
    img {
      display: inline-block;
      width: 1.5rem;
      height: 1.5rem;
      margin: .075rem 0.6rem .075rem 0;
      float: left;
    }
  }

  #social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 1.5rem;
    b {
      margin-right: 1rem;
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: .15ch;
      text-transform: uppercase;
    }
    a {
      color: #323232;
      padding: .5rem;
      &:hover { opacity: .8; }
    }
    svg {
      display: block;
      width: 1.8rem;
      height: 1.8rem;
    }
  }

  #hosts {
    grid-area: 2 / 1;
    place-self: start;
    padding: 0;
    position: sticky;
    top: calc(2rem + var(--nav-height));
    h2 {
      margin: 0 0 1em;
      font-weight: 600;
      font-size: 1.5rem;
    }
    ul {
      list-style: none;
      display: grid;
      grid: auto / 1fr;
      gap: 1rem;
      padding: 0;
      margin: 0;
    }
    li {
      display: grid;
      gap: 0 1rem;
      grid: auto auto / auto 1fr;
    }
    :is(.host-image, img) {
      border-radius: 50%;
      width: 5rem;
      height: 5rem;
    }
    .host-image {
      grid-area: 1 / 1 / -1 / 2;
      display: grid;
      grid: 1fr / 1fr;
      place-items: end start;
      color: #323232;
      position: relative;
      transition: opacity .2s;
      svg {
        width: 1.5rem;
        height: 1.5rem;
        position: absolute;
        inset: auto auto 0 0;
        background-color: white;
        border-radius: .3rem;
      }
    }
    a.host-image:hover { opacity: .8; }
    .host-name {
      font-size: 1.2rem;
      place-self: end start;
      font-weight: 600;
    }
    .host-role {
      font-size: 1rem;
      place-self: start;
      b { font-weight: 600; }
    }
  }

  #introduction {
    grid-area: 1 / 2 / -1 / -1;
    > :first-child { margin-top: 0; }
    ul { padding: 0 0 0 1rem; }
    li {
      margin: .5rem 0;
      padding: 0 0 0 .5rem;
    }
    a {
      color: #221EE9;
      text-decoration: none;
      &:hover { text-decoration: underline; }
    }
  }

  @media(width < 1000px){
    #panel { grid: auto / 1fr; }
    #info { display: none; }
    #hosts {
      grid-area: auto;
      position: static;
      ul { grid: auto auto / 1fr 1fr; }
    }
    #introduction { grid-area: auto; }
  }

  @media(width < 600px){
    #hosts {
      padding: 0 max((100% - 25rem) / 2, 0px);
      ul { grid: auto / 1fr; }
    }
  }
}