.glass-page .finish-options.glass-options {
  display: block;
  padding: clamp(64px, 7vw, 112px) 6.5vw;
  background: #f7f5ef;
}

.glass-options .glass-options-heading {
  margin-bottom: 36px;
}

.glass-options .glass-options-heading h2 {
  font-size: clamp(32px, 4vw, 64px);
  line-height: 1.35;
  word-break: keep-all;
}

.glass-options .glass-options-heading > p:last-child {
  max-width: 900px;
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.8;
  word-break: keep-all;
}

.glass-page .glass-options .finish-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.glass-options .finish-grid article {
  min-width: 0;
  padding: 0;
  border: 0;
  text-align: center;
}

/* Each viewport displays one unchanged sample from the approved image. */
.glass-options .glass-sample {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 398 / 569;
  overflow: hidden;
}

.glass-options .finish-grid h3 {
  margin: 20px 0 8px;
  font: 500 clamp(18px, 1.6vw, 25px)/1.5 var(--serif);
  letter-spacing: -.035em;
  word-break: keep-all;
}

.glass-options .finish-grid p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.glass-hero > img {
  object-position: center;
}

@media (max-width: 900px) {
  .glass-page .glass-options .finish-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 20px;
  }
}

@media (max-width: 600px) {
  .glass-hero > img {
    object-position: 54% center;
  }

  .glass-page .finish-options.glass-options {
    padding: 64px 20px;
  }

  .glass-options .glass-options-heading {
    margin-bottom: 28px;
  }

  .glass-page .glass-options .finish-grid {
    gap: 30px 14px;
  }

  .glass-options .finish-grid h3 {
    margin-top: 14px;
    font-size: 18px;
  }
}