.skip-link {
  position: absolute;
  left: -999px;
  top: 10px;
  background: #fff;
  color: #000;
  padding: 10px 12px;
  border-radius: 10px;
  z-index: 999;
}

.skip-link:focus {
  left: 12px;
}

.container {
  width: min(var(--container), calc(100% - 40px));
  margin: 0 auto;
}

.hero > .container {
  position: relative;
  z-index: 1;
}

main {
  position: relative;
  z-index: 2;
}

.content-wrap {
  position: relative;
  z-index: 2;
  background: var(--bg);
  min-height: auto;
  box-shadow: 0 -26px 70px rgba(16, 24, 40, 0.14);
}

.section {
  padding: var(--section-md) 0;
}

.section-alt {
  background: var(--bg2);
  border-top: 1px solid rgba(16, 24, 40, 0.06);
  border-bottom: 1px solid rgba(16, 24, 40, 0.06);
}

.grid {
  display: grid;
  gap: 12px;
}

.cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cards.cards--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 980px) {
  .cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cards.cards--four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .container {
    width: min(var(--container), calc(100% - 28px));
  }

  .hero > .container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .section {
    padding: 38px 0;
  }

  .cards {
    grid-template-columns: minmax(0, 1fr);
  }
}