:root {
  --clr-primary: hsl(185, 75%, 39%);

  --clr-secondary-900: hsl(229, 23%, 23%);
  --clr-secondary-800: hsl(227, 10%, 46%);

  --clr-neutral-300: hsl(0, 0%, 59%);
  --clr-neutral-200: hsl(0, 0%, 89%);
  --clr-neutral-100: hsl(0, 0%, 100%);

  --ff: "Kumbh Sans", sans-serif;

  --fs-300: 0.825rem;
  --fs-400: 1.125rem;

  --fw-regular: 400;
  --fw-bold: 700;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

body {
  background-color: var(--clr-primary);
  background-image: url(images/bg-pattern-top.svg),
    url(images/bg-pattern-bottom.svg);
  background-position: top -600px left -760px, bottom -620px right -740px;
  background-repeat: no-repeat, no-repeat;
  color: var(--clr-neutral-300);
  font-family: var(--ff);
  font-size: var(--fs-400);
  font-weight: var(--fw-regular);
  text-align: center;
  line-height: 1.5;

  display: grid;
  min-height: 100vh;
  place-content: center;

  @media (min-width: 600px) {
    background-position: top -480px left -300px, bottom -650px right -200px;
  }
}

h1 {
  font-size: inherit;
  font-weight: inherit;
}

h2 {
  font-size: 0.825rem;
  font-weight: inherit;
  margin: 0.4rem 0 1.5rem;
}

ul {
  list-style: none;
  border-top: 1px solid var(--clr-neutral-200);
  padding: 1.5rem;
}

li {
  font-size: 0.625rem;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.flex {
  display: flex;
  flex-direction: column;
}

.card {
  width: min(88vw, 350px);
  border-radius: 0.8rem;
  overflow: hidden;
}

.bg-image {
  background-image: url(images/bg-pattern-card.svg);
  background-position: center;
  height: 145px;

  position: relative;
}

.profile-image {
  border: 6px solid var(--clr-neutral-100);
  border-radius: 50%;

  transform: translateY(90px);
}

.card__content {
  background-color: var(--clr-neutral-100);
  padding: 4.3rem 0 0;
}

.accent-1 {
  color: var(--clr-secondary-900);
  font-size: 1.125rem;
  font-weight: var(--fw-bold);
  margin-left: 0.3rem;
}

.accent-2 {
  letter-spacing: 0.1rem;
  margin-left: 0.5rem;
}