html,
body {
  /*overflow-x: hidden;*/
  max-width: 100%;
  background-color: white;
}

.arrow {
  font-size: 0.75em;
}

.card {
  box-shadow: 0 4px 8px 0 rgb(0 0 0 / 10%);
}

.card-link {
  color: black !important;
}
.card-link:focus {
  outline: 2px solid black;
}
/* is there a way to do this without !important? */

.card-body h2,
.card-body h3,
.card-body h4 {
  font-size: 1.333rem;
  font-weight: 600;
  color: black;
}

@media screen and (min-width: 900px) {
  .card-access {
    min-height: 8rem;
  }

  .card-start {
    min-height: 12rem;
  }

  .card-articles {
    min-height: 16rem;
  }

  .card-join {
    min-height: 14rem;
  }

  /* state orgs */

  .card-org {
    min-height: 25rem;
  }

  .card-header {
    padding: 1rem;
  }
}

@media screen and (min-width: 769px) {
  .partner-cards {
    padding-top: 1.5em;
  }
}

@media screen and (min-width: 769px) {
  .partner-cards {
    padding-top: 1.5em;
  }

  .card-article {
    margin-top: 1rem;
  }

  .card-body-article {
    min-height: 12rem;
  }
}

@media screen and (max-width: 767px) {
  .card {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
  }
  .card-body h1,
  .card-body h2,
  .card-body h3 {
    font-size: 1em;
    font-weight: 700;
  }
}

.jumbotron-yellow {
  background-color: #f1bf5c;
}

.jumbotron-grey {
  background-color: #f7f7f8;
}

.card-grey {
  background-color: #f7f7f8;
}

.card-yellow {
  background-color: #f1bf5c;
}

.jumbotron-purple {
  background-color: #eaeefa;
}

.card-purple {
  background-color: #eaeefa;
}

.jumbotron-brown {
  background-color: #f9f4ee;
}

.jumbotron-dark-brown {
  background-color: #d9c09f;
}

.card-brown {
  background-color: #f9f4ee;
}

.jumbotron-bottom {
  background-color: white;
}