.reviews {
  padding: 110px 0;
  background: #f3f1eb;
}

.reviews-layout {
  position: relative;
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 230px;
  gap: 4.5rem;
  align-items: center;
  padding: 64px;
  color: #fff;
  background: #0b0b0c;
  overflow: hidden;
}

.reviews-layout::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 49.8%, rgba(255,255,255,.045) 50%, transparent 50.2%);
  pointer-events: none;
}

.reviews-mark,
.reviews-copy,
.reviews-note { position: relative; z-index: 1; }

.reviews-mark {
  width: 150px;
  height: 150px;
  display: grid;
  place-items: center;
  border: 1px solid #39393c;
  transform: rotate(-5deg);
}

.reviews-mark span {
  color: #ffd400;
  font-family: "Space Grotesk", sans-serif;
  font-size: 6rem;
  font-weight: 700;
  line-height: 1;
}

.reviews .kicker { color: #ffd400; }
.reviews h2 {
  margin-top: 1rem;
  font-size: clamp(2.8rem, 5vw, 5.3rem);
  letter-spacing: -.06em;
}

.reviews-copy p {
  max-width: 620px;
  margin: 1.6rem 0 0;
  color: #aaa;
}

.reviews-copy .btn { margin-top: 1.8rem; }

.reviews-note {
  padding-left: 1.5rem;
  border-left: 3px solid #ffd400;
}

.reviews-note b,
.reviews-note span { display: block; }
.reviews-note b { color: #ffd400; letter-spacing: .14em; }
.reviews-note span { margin-top: .5rem; color: #aaa; font-size: .84rem; text-transform: uppercase; }

@media (max-width: 900px) {
  .reviews-layout { grid-template-columns: 120px 1fr; gap: 2.5rem; padding: 48px; }
  .reviews-mark { width: 110px; height: 110px; }
  .reviews-mark span { font-size: 4.6rem; }
  .reviews-note { grid-column: 2; }
}

@media (max-width: 620px) {
  .reviews { padding: 80px 0; }
  .reviews-layout { grid-template-columns: 1fr; gap: 2rem; padding: 34px 24px; }
  .reviews-mark { width: 84px; height: 84px; }
  .reviews-mark span { font-size: 3.5rem; }
  .reviews-note { grid-column: auto; }
  .reviews-copy .btn { width: 100%; }
}