body {
  background: white;
  padding: 0;
  margin: 0;
  font: 400 1rem/1.5 Figtree, "Proxima Nova", Figtree, sans-serif;
}
button, input, select, textarea {
  font: inherit;
}
main {

}
.max-w {
  width: min(1280px, 90%);
  margin-inline: auto;
}
section {
  color: white;
  padding-block: 2rem;
  background: linear-gradient(102deg in oklch,#461a5f,#2c7593,#6d2250);
  &:nth-child(even) {
    background: hsl(300 35% 25%);
  }
}

.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}
h2 {
  color: white;
  font-weight: 650;
  font-size: 2.25rem;
  letter-spacing: 0.0125em;
  margin: 0 0 2rem;
  max-width: 50ch;
}
h3 {
  color: inherit;
  font-weight: 650;
  letter-spacing: 0.025em;
  font-size: 1.375rem;
  margin: 0 0 1rem;
}
.article {
  grid-template-rows: subgrid;
  grid-rows: span 3;
  border: 1px solid hsl(0 0% 100% / 0.5);
  color: white;
  transition: scale 0.3s ease, rotate 0.3s ease, background-color 0.3s ease, translate 0.3s ease;
  &:hover,
  &:focus {
    background-color: hsl(0 0% 0% / 0.1);
    transform: translate(0, -0.25rem);
  }
  .min-h {
    min-height: 6lh;
  }
  p {
    font-weight: 400;
  }
  .card__link {
    color: inherit;
    text-decoration: none;
    display: block;
    position: relative;
    padding: 2rem;
    &:focus-visible {
      outline: 0.5rem solid hsl(50 100% 50% / 1);
      outline-offset: 0;
    }
    .button {
      transition: background-color 0.3s ease;
    }
    &:focus .button,
    &:hover .button {
      background-color: hsl(330 80% 40%);
      text-decoration: underline;
      text-underline-offset: 0.25em;
    }
  }
}

.button {
  display: inline-block;
  border-radius: 9999px;
  background: transparent;
  border: 2px solid currentColor;
  padding: 0.5rem 1.5rem;
  whitespace: nowrap;
  letter-spacing: 0.05em;
  font-weight: 600;
}

::selection {
  background: white;
  color: black;
}