@font-face {
  font-family: 'Bebas Neue';
  src: url('/fonts/bebas-neue-latin-ext-400-normal.woff2') format('woff2');
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root { --heading: 'Bebas Neue', 'Barlow Condensed', 'Arial Narrow', sans-serif; }

.brand { width: 190px; height: 70px; }
.brand__mark {
  width: 190px;
  height: 70px;
  display: block;
  background: var(--orange);
  -webkit-mask: url('/images/reman-logo.png') left center / contain no-repeat;
  mask: url('/images/reman-logo.png') left center / contain no-repeat;
}
.brand--compact { width: 180px; height: 67px; }
.brand--compact .brand__mark { width: 180px; height: 67px; }
.product-card--compact { position: relative; }
.product-card--compact .product-card__body { position: relative; }

@media (min-width: 901px) {
  .hero__grid { grid-template-columns: minmax(0, 1.08fr) minmax(500px, .92fr); }
  .hero h1 { font-size: clamp(66px, 5vw, 80px); font-weight: 400; line-height: .98; }
  .catalog-hero h1 { font-size: clamp(52px, 3.7vw, 60px); font-weight: 400; white-space: nowrap; }
  .product-summary h1 { font-weight: 400; }
}

@media (max-width: 900px) {
  .brand { width: 172px; height: 62px; }
  .brand__mark { width: 172px; height: 62px; }
}

@media (max-width: 620px) {
  .brand { width: 166px; height: 60px; }
  .brand__mark { width: 166px; height: 60px; }
  .hero { position: relative; }
  .hero__grid { position: relative; }
  .hero__content { padding-top: 42px; }
  .hero h1 { max-width: 335px; font-size: 64px; font-weight: 400; line-height: .95; }
  .hero__content > p { max-width: 215px; min-height: 142px; }
  .hero__media {
    position: absolute;
    z-index: 1;
    top: 300px;
    right: -92px;
    width: 280px;
    height: 280px;
    margin: 0;
    pointer-events: none;
  }
  .hero__media img { width: 100%; height: 100%; object-fit: contain; }
  .hero__content { position: relative; z-index: 2; }
  .hero__content .button-row, .hero__proof { position: relative; z-index: 3; }
}