/* PAGE-SPECIFIC STYLES FOR INDEX. MAY OVERWRITE MAIN STYLES. */

.hero {
  margin: 2em 1em;
  text-align: center;
  color: var(--yellow-500);
}

.hero__title {
  font-size: var(--display);
  font-weight: 800;
}

.hero__subheader {
  font-size: 1.25rem;
}

.benefits {
  padding-inline-start: 0;
  list-style: none;
  text-align: center;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em;
}

.help__list {
  padding-inline-start: 0;
  list-style: none;
}

.benefits__wrapper>p {
  line-height: 1.5em;
  margin: 0;
}

.benefits__item {
  flex: 1;
  min-width: 240px;

  padding: 1em;
  background-color: var(--white);
  color: var(--black);
  border: 1px solid var(--black);
  border-radius: 1em;
  box-shadow: 2px 2px var(--black);
}

.benefits__title {
  margin-bottom: 1em;
  font-size: var(--paragraph);
  color: var(--black);
}

.services {
  padding-inline-start: 1em;
}

.services__item {
  list-style-type: none;
  padding-inline-start: 1em;
}

.services__item::marker {
  content: url("/assets/images/checkmark_mint-900.svg");
}

.help__item {
  padding: 1em;
  background-color: var(--white);
  color: var(--black);
  border: 1px solid var(--black);
  border-radius: 1em;
  box-shadow: 2px 2px var(--black);
}

.help__item h3 {
  color: var(--black);
}

.help__item+.help__item {
  margin-top: 1em;
  margin-bottom: 1em;
}

/* MEDIA QUERIES */

@media screen and (min-width: 600px) {
  /* Insert queries */

  .hero {
    margin: 4em 2em;
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Insert animations */
  }
}

@media screen and (min-width: 800px) {
  /* s */

  .help__list {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 2em;
  }

  .help__item+.help__item {
    margin: 0;
  }

  .help__item {
    flex: 1;
    flex-basis: 45%;
  }

  @media (prefers-reduced-motion: no-preference) {
    /* Insert animations */
  }
}

@media screen and (min-width: 900px) {
  .hero__title {
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media screen and (min-width: 1200px) {
  /* Insert queries */

  @media (prefers-reduced-motion: no-preference) {
    /* Insert animations */
  }
}