/* CASE STYLES */

.title__contact {
  text-decoration: underline;
}

.title__contact:is(:hover, :focus) {
  text-decoration: none;
}

.title__contact:active {
  color: #D5D5E7;
}

.case__list-container {
  max-width: 420px;
  margin: 2em auto;
}

.case__list-title {
  color: var(--white);
}

.list__title {
  color: var(--black);
}

.case__highlights,
.case__problems {
  list-style-type: disc;
  padding-inline-start: 1em;
  width: auto;
}

.case__highlights {
  list-style-image: url("/assets/images/checkmark_mint-500.svg");
}

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

.case__problem>p,
.case__highlight>p {
  font-size: var(--heading-3);
}

.case__example {
  border: 1px solid var(--black);
  box-shadow: var(--box-shadow);
  border-radius: 1em;
}

.case__img-container {
  margin: 1em auto;
  display: grid;
  place-items: center;
  width: 320px;
}

.caption {
  margin-top: .5em;
  text-align: center;
}

.case__problems {
  list-style-image: url("/assets/images/x_magenta-500.svg");
}

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



@media screen and (min-width: 600px) {
  .case__img-container {
    margin-top: 2em;
  }

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