@media (max-width: 420px) {

  h1 {

    font-size:
      2.1rem;

  }

  .card h2 {

    font-size:
      1.45rem;

  }

  .card {

    padding:
      24px 18px;

  }

}

nav .nav-links a::after {

  left:
    50%;

  right:
    auto;

  transform:
    translate(-50%, 5px);

  text-align:
    center;

}

nav .nav-links a:hover::after {

  transform:
    translate(-50%, 0);

}

@media (max-width: 820px) {

  nav .nav-links a::after,
  nav .nav-links a:hover::after {

    left:
      auto;

    transform:
      none;

    text-align:
      left;

  }

}

@media (max-width: 600px) {

  .carousel {

    width:
      100vw;

    height:
      240px;

    margin-left:
      calc(50% - 50vw);

    margin-right:
      calc(50% - 50vw);

  }

  .track {

    align-items:
      center;

  }

  .slide {

    width:
      min(72vw, 240px) !important;

    height:
      calc(min(72vw, 240px) * 0.7) !important;

    margin:
      0 10px !important;

  }

  .slide.active {

    transform:
      scale(1.05);

  }

  .dots {

    margin-top:
      8px;

  }

}