#hero {
  background: #ecf9ff;
  header {
    padding: 4rem;
    text-align: center;
    font-size: clamp(1.1rem, 0.8vw + 0.86rem, 1.5rem);
    h1 {
      margin: 0 0 1.5rem;
      font-size: clamp(2.3rem, 1rem + 3vw, 4rem);
    }
    p { margin: 0; }
  }
}

#comparisons, #guide, #landscape {
  padding: 3rem max((100% - 1200px) / 2 + 2rem, 2rem);
  margin: 0 auto;
  max-width: 1200px;
  & > h2 {
    margin: 0 0 1rem;
    font-size: clamp(1.7rem, 1vw + 1.3rem, 2.2rem);
  }
  & > p {
    max-width: 62ch;
    margin: 0 0 2rem;
    font-size: 1.1rem;
  }
}

#guide {
  padding-bottom: 1rem;
  ol {
    max-width: 62ch;
    margin: 0;
    padding-left: 1.4rem;
    li {
      margin: 0 0 1.4rem;
      strong { display: block; }
    }
  }
}

#landscape {
  h3 {
    margin: 2rem 0 .5rem;
    font-size: 1.25rem;
  }
  h3 + p {
    max-width: 62ch;
    margin: 0;
  }
  .landscape-note {
    margin-top: 2.5rem;
    font-size: .95rem;
    color: #555;
  }
}

#comparisons {
  nav {
    display: grid;
    grid: auto-flow 1fr / repeat(auto-fill, minmax(18rem, 1fr));
    gap: clamp(1.5rem, 4vw, 2.5rem);
  }
  a.comparison {
    min-height: 8rem;
    padding: 2rem;
    color: black;
    background: linear-gradient(to bottom, white, #eaf5fd);
    border-radius: .6rem;
    box-shadow: 0 0 .6rem rgb(0 0 0 / 20%);
    text-decoration: none;
    transition: box-shadow .2s;
    position: relative;
    &.featured {
      box-shadow: 0 0 0 2px #7c3aed, 0 0 .6rem rgb(0 0 0 / 20%);
      &::before {
        content: "Featured";
        position: absolute;
        top: -.7rem;
        left: 1.5rem;
        padding: .1rem .6rem;
        background: #7c3aed;
        color: white;
        border-radius: 1rem;
        font-size: .7rem;
        font-weight: 700;
      }
      &:hover {
        box-shadow: 0 0 0 2px #7c3aed, 0 0 1rem rgb(0 0 0 / 30%);
      }
    }
    .comparison-header {
      display: block;
      margin-bottom: .8rem;
      font-weight: 600;
      line-height: 1.5;
      font-size: clamp(1.2rem, 1vw + .8rem, 1.4rem);
    }
    p:last-child { margin-bottom: 0; }
    &:hover {
      box-shadow: 0 0 1rem rgb(0 0 0 / 30%);
    }
  }
}