#hero {
  padding: 6rem 2rem 2rem;
  text-align: center;
  h1 {
    margin: 0 0 1rem;
    font-size: clamp(2.5rem, 7vw - .3rem, 3.7rem);
  }
  p {
    max-width: 40rem;
    margin: 0 auto;
    font-size: clamp(1rem, .8vw + .86rem, 1.3rem);
    color: #57606f;
  }
}

#webinars {
  padding: 2rem 2rem 6rem;
  ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 2rem;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
  }
  a {
    display: flex;
    flex-flow: column;
    color: inherit;
    text-decoration: none;
    border-radius: 1rem;
    overflow: hidden;
    background: white;
    box-shadow: 0 0 5rem #eaf0f7;
    transition: box-shadow .2s;
    &:hover { box-shadow: 0 0 3rem #d5e2f0; }
  }
  img {
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;
    object-fit: cover;
  }
  time {
    margin: 1.2rem 1.2rem 0;
    font-size: .85rem;
    font-weight: 600;
    color: #747a85;
  }
  .title {
    margin: .5rem 1.2rem 0;
    font-size: 1.15rem;
    font-weight: 700;
  }
  .description {
    margin: .5rem 1.2rem 0;
    font-size: .9rem;
    color: #57606f;
  }
  .hosts {
    margin: auto 1.2rem 1.2rem;
    padding-top: 1rem;
    font-size: .85rem;
    font-weight: 600;
  }
}