/* Improve legibility for the five feature callouts around the hero diaper. */
@media (min-width: 1024px) {
  #about .hidden.lg\:block.absolute.inset-0 > div {
    width: 16rem !important;
    transform: none !important;
    translate: none !important;
  }

  #about .hidden.lg\:block.absolute.inset-0 > div:nth-child(-n + 2) {
    right: auto !important;
    left: -9rem !important;
  }

  #about .hidden.lg\:block.absolute.inset-0 > div:nth-child(n + 3) {
    right: -9rem !important;
    left: auto !important;
  }

  #about .hidden.lg\:block.absolute.inset-0 > div:nth-child(1),
  #about .hidden.lg\:block.absolute.inset-0 > div:nth-child(3) {
    top: 14% !important;
    bottom: auto !important;
  }

  #about .hidden.lg\:block.absolute.inset-0 > div:nth-child(2),
  #about .hidden.lg\:block.absolute.inset-0 > div:nth-child(4) {
    top: 58% !important;
    bottom: auto !important;
  }

  #about .hidden.lg\:block.absolute.inset-0 h4 {
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
    letter-spacing: 0.075em !important;
  }

  #about .hidden.lg\:block.absolute.inset-0 p {
    max-width: 14.5rem !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
  }
}

@media (max-width: 1023px) {
  body #about .lg\:hidden.mt-12 > div {
    grid-column: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }

  body #about .lg\:hidden.grid > div:last-child {
    display: flex !important;
  }

  #about .lg\:hidden.mt-12 h4 {
    font-size: 0.76rem !important;
    line-height: 1.35 !important;
  }

  #about .lg\:hidden.mt-12 p {
    max-width: 11rem !important;
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
  }
}