/* Desktop-only composition. Mobile remains governed by learn.css. */
@media (min-width: 801px) {
  .learn-intro {
    min-height: 390px;
    display: grid;
    grid-template-columns: 42% 58%;
    grid-template-rows: auto 1fr;
  }

  .learn-intro-copy {
    max-width: none;
    grid-column: 1;
    grid-row: 1;
  }

  .hero-students {
    position: relative;
    right: auto;
    width: 100%;
    max-width: 720px;
    grid-column: 2;
    grid-row: 1 / 3;
    align-self: end;
    justify-self: end;
  }

  .progress-box {
    position: static;
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    justify-self: start;
    max-width: 100%;
    margin: 18px 0 12px;
  }
}