.before-after-section {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.7fr);
  gap: 64px;
  align-items: center;
  border-top: 1px solid var(--line);
  scroll-margin-top: 120px;
}
.before-after-copy h2 { margin: 20px 0 26px; }
.before-after-copy p { max-width: 360px; margin-bottom: 18px; }
.before-after-copy .before-after-note { color: #52676b; }
.before-after-copy .text-link { margin-top: 12px; }
.before-after-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.before-after-pair figure { margin: 0; min-width: 0; }
.before-after-pair figcaption { min-height: 85px; padding: 0 0 18px; }
.before-after-pair figcaption > strong { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 1.18rem; color: var(--ink); }
.before-after-pair figcaption > span { display: block; color: #41565e; font-size: .82rem; margin-top: 5px; line-height: 1.5; }
.before-after-pair a { display: block; border-radius: 8px; overflow: hidden; background: #eef0ed; }
.before-after-pair img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: contain; }
.before-after-pair a:focus-visible { outline: 3px solid #34785e; outline-offset: 4px; }
@media (max-width: 1050px) {
  .before-after-section { gap: 32px; grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); }
  .before-after-pair { gap: 12px; }
  .before-after-pair figcaption { min-height: 107px; }
}
@media (max-width: 700px) {
  .before-after-section { grid-template-columns: 1fr; gap: 30px; }
  .before-after-copy h2 { margin: 15px 0 20px; }
  .before-after-copy h2 br { display: none; }
  .before-after-copy p { max-width: none; }
  .before-after-pair { gap: 12px; }
  .before-after-pair figcaption { min-height: 103px; padding-bottom: 14px; }
  .before-after-pair figcaption > strong { font-size: 1rem; gap: 5px; }
  .before-after-pair figcaption > span { font-size: .76rem; }
}