.cases {
  margin: 0;
  padding: 0;
  list-style: none;
}

.case {
  margin-bottom: 1em;
  padding: 1.5em;
  border: 1px solid var(--black);
  border-radius: 1em;
  box-shadow: 2px 2px var(--black);

  display: flex;
  flex-wrap: wrap;
}

.case__title,
.case__highlights {
  flex: 1 1 100%;
  margin-bottom: 1em;
}

.case__title>h2 {
  margin-bottom: .5em;
  font-size: clamp(1.75rem, 1.5714rem + 0.7619vw, 2rem);
}

.icon {
  width: 96px;
  height: 96px;
}

.button__contents {
  display: flex;
  flex-wrap: nowrap;
  gap: .5em;
}

.button__contents>p {
  margin: 0;
}

.highlights__title {
  color: var(--white);
}

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

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

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

.case__problems {
  padding-inline-start: 2em;
}

.case__problem {
  list-style-type: '✘';
  padding-inline-start: 1em;
}

.case__button {
  align-self: flex-end;
  width: 100%;
}

.button__contents {
  justify-content: center;
}

@media screen and (min-width: 600px) {

  .case {
    margin-bottom: 2em;
  }

  .case__button {
    width: auto;
  }

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

@media screen and (min-width: 900px) {
  .title>p {
    text-align: center;
  }

  .cases {
    display: flex;
    justify-content: center;
    gap: 2em;
  }

  .case {
    flex-basis: 45%;
  }

  .case__button {
    flex: 1;
  }

  .button__contents {
    justify-content: center;
  }
}

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

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

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