body {
  font-family: var(--font-sans);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  background: #f9f9f9;
}

u {
  border-bottom: 3px solid var(--color-yellow);
  text-decoration: none;
  padding-bottom: 1px;
}

.main-content {
  margin-top: -70px;
}

.cards {
  padding: 5px 20px;

  @media (min-width: 640px) {
      display: flex;
      flex-wrap: wrap;
      max-width: 1600px;
      margin: auto;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

body {
  font-family: var(--font-sans);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  background: #f9f9f9;
}

u {
  border-bottom: 3px solid var(--color-yellow);
  text-decoration: none;
  padding-bottom: 1px;
}

.main-content {
  margin-top: -70px;
}

.cards {
  padding: 5px 20px;

  @media (--medium-up) {
      display: flex;
      flex-wrap: wrap;
      max-width: 1600px;
      margin: auto;
  }
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

Use custom media to avoid "hard coded" breakpoint values
Use custom media to avoid "hard coded" breakpoint values
