.photo-hero {
  background: #d7d2ca;
}

.hero-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
}

.photo-hero .visual-caption {
  background: rgba(255, 253, 248, 0.9);
  padding: 7px 9px;
}

.photo-hero .tag-callout {
  left: auto;
  right: 22px;
  bottom: 22px;
  width: 250px;
  padding: 14px 16px;
  background: rgba(18, 35, 31, 0.88);
  color: #fff;
  backdrop-filter: blur(5px);
}

.compare-photo {
  position: absolute;
  inset: 0 42% 0 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.025);
  transition: opacity 0.45s ease, transform 0.7s ease;
  overflow: hidden;
  background: #d7d2ca;
}

.compare-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 12%;
}

.compare-panel[data-mode="before"] .compare-photo-before,
.compare-panel[data-mode="after"] .compare-photo-after {
  opacity: 1;
  transform: scale(1);
}

.photo-tag-demo {
  position: relative;
  height: auto;
  min-height: 500px;
  justify-content: flex-start;
  padding: 54px 34px 30px;
}

.photo-tag-demo .sample-label {
  position: static;
  transform: none;
  margin: 0 0 18px;
}

.tag-photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: auto 0;
}

.tag-photo-grid figure {
  margin: 0;
  background: #fff;
  color: var(--ink);
  overflow: hidden;
}

.tag-photo-grid img {
  display: block;
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.tag-photo-grid figcaption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  font-size: 11px;
}

.tag-photo-grid figcaption b {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--green);
}

.photo-tag-demo .sample-note {
  margin-top: 20px;
}

@media (max-width: 900px) {
  .compare-photo {
    inset: 0 0 230px;
  }

  .compare-photo img {
    object-position: center 18%;
  }
}

@media (max-width: 600px) {
  .hero-photo {
    object-position: center 8%;
  }

  .compare-photo {
    bottom: 235px;
  }

  .photo-tag-demo {
    height: auto;
    padding: 32px 20px 24px;
  }

  .tag-photo-grid {
    grid-template-columns: 1fr;
  }

  .tag-photo-grid img {
    height: 210px;
  }
}