/* Make the documented impact test a visible part of the evidence, not a thumbnail. */
.evidence {
  overflow: hidden;
}

.evidence-grid {
  grid-template-columns:
    minmax(290px, .9fr)
    minmax(330px, 1fr)
    minmax(300px, 370px);
  gap: clamp(34px, 4vw, 66px);
}

.test-photo {
  display: flex;
  align-self: stretch;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  min-width: 0;
}

.test-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 599 / 703;
  object-fit: cover;
  border: 1px solid rgba(21, 62, 59, .2);
  border-radius: 0;
}

.test-photo figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  color: rgba(21, 62, 59, .72);
  font-size: 10px;
  letter-spacing: .12em;
  text-align: left;
}

.test-photo figcaption::before {
  width: 32px;
  height: 1px;
  background: currentColor;
  content: "";
  opacity: .55;
}

.kn-explainer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  margin: 12px 0 24px;
  padding: 15px 0;
  border-top: 1px solid rgba(21, 62, 59, .22);
  border-bottom: 1px solid rgba(21, 62, 59, .22);
}

.kn-explainer > b {
  font: 600 18px/1.2 'Outfit', sans-serif;
  letter-spacing: .01em;
  white-space: nowrap;
}

.kn-explainer > b small {
  display: block;
  margin-top: 5px;
  font: 500 9px/1.4 'Noto Sans JP', sans-serif;
  letter-spacing: .06em;
}

.kn-explainer > p {
  margin: 0;
  font-size: 11px;
  line-height: 1.9;
}

@media (max-width: 1100px) and (min-width: 901px) {
  .evidence-grid {
    grid-template-columns:
      minmax(220px, .9fr)
      minmax(265px, 1fr)
      minmax(210px, .78fr);
    gap: 28px;
  }

  .test-photo {
    display: flex;
  }
}

@media (max-width: 900px) and (min-width: 761px) {
  .evidence-grid {
    grid-template-columns: minmax(0, 1fr) minmax(270px, .82fr);
    gap: 38px;
    align-items: start;
  }

  .evidence-copy {
    grid-column: 1 / -1;
  }

  .test-photo {
    display: flex;
    grid-column: 2;
    grid-row: 2;
  }

  .test-result {
    grid-column: 1;
    grid-row: 2;
  }

  .usage-note {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .evidence-grid {
    grid-template-columns: 1fr;
  }

  .test-photo {
    display: flex;
    grid-column: auto;
    grid-row: auto;
    width: min(100%, 410px);
    margin: 2px auto 0;
  }

  .test-photo figcaption {
    margin-top: 12px;
    font-size: 9px;
  }

  .kn-explainer {
    gap: 15px;
    margin: 10px 0 22px;
    padding: 14px 0;
  }

  .kn-explainer > b {
    font-size: 17px;
  }

  .kn-explainer > p {
    font-size: 11.5px;
    line-height: 1.85;
  }
}