.roots {
  padding: 105px 0;
  display: grid;
  grid-template-columns: .78fr 1.22fr;
  gap: 72px;
  align-items: stretch;
}

.roots-year {
  min-height: 480px;
  padding: 42px;
  border: 1px solid var(--line);
  background: radial-gradient(circle at 50% 30%, #c51f3248, transparent 42%), linear-gradient(145deg, #17191b, #090a0b);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.roots-year span {
  font: 800 1rem "Barlow Condensed";
  letter-spacing: .28em;
  color: var(--gold);
}

.roots-year strong {
  font: 900 clamp(6rem, 12vw, 10rem) "Barlow Condensed";
  line-height: .8;
  color: var(--white);
  margin: 20px 0 28px;
}

.roots-year small { color: var(--muted); }

.roots-copy {
  padding: 28px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.roots-copy h2 {
  font-size: clamp(4rem, 8vw, 7rem);
  line-height: .78;
  margin: 26px 0 34px;
}

.roots-copy h2 em { color: var(--red); }

.roots-copy p {
  max-width: 670px;
  color: var(--muted);
  font-size: 1.05rem;
}

.roots-copy .button { margin-top: 18px; }

@media (max-width: 800px) {
  .roots {
    grid-template-columns: 1fr;
    padding: 74px 0;
    gap: 38px;
  }

  .roots-year {
    min-height: 340px;
  }

  .roots-copy { padding: 0; }
}

@media (max-width: 480px) {
  .roots-year { padding: 30px; }
}