.tech-support {
  padding-top: clamp(6.25rem, 5rem + 6.25vw, 12.5rem);
}

.tech-support__card {
  margin-top: clamp(0.0625rem, -0.075rem + 0.6875vw, 0.75rem);
  padding: clamp(1.25rem, 1.125rem + 0.625vw, 1.875rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.25rem, 1rem + 1.25vw, 2rem);
  background-color: var(--color-accent-gold);
  border-radius: clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem);
}

.tech-support__icon {
  width: clamp(5.875rem, 4.925rem + 4.75vw, 10.625rem);
  height: clamp(3.5625rem, 2.9875rem + 2.875vw, 6.4375rem);
  flex-shrink: 0;
}

.tech-support__list-wrap {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 0.8125rem + 0.9375vw, 1.9375rem);
}

.tech-support__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tech-support__label {
  font-family: var(--font-body-regular);
  font-size: clamp(0.875rem, 0.775rem + 0.5vw, 1.375rem);
  line-height: clamp(1.1875rem, 1.05rem + 0.6875vw, 1.875rem);
  color: var(--color-text-invert);
}

.tech-support__value {
  font-family: var(--font-body-semibold);
  font-size: clamp(1.125rem, 0.975rem + 0.75vw, 1.875rem);
  line-height: clamp(1.5625rem, 1.3625rem + 1vw, 2.5625rem);
  color: var(--color-text-invert);
}

.tech-support__doc-wrap {
  display: flex;
  align-items: center;
  justify-content: start;
}

.tech-support__doc {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.25rem, 0.225rem + 0.125vw, 0.375rem);
  align-self: start;
  padding: clamp(0.75rem, 0.7rem + 0.25vw, 1rem)
    clamp(1.25rem, 1.2rem + 0.25vw, 1.5rem)
    clamp(0.75rem, 0.7rem + 0.25vw, 1rem) clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
  background-color: var(--color-bg);
  border-radius: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);
  font-family: var(--font-body-semibold);
  font-size: clamp(0.875rem, 0.825rem + 0.25vw, 1.125rem);
  line-height: clamp(1.1875rem, 1.1125rem + 0.375vw, 1.5625rem);
}

.tech-support__doc-icon {
  width: clamp(1.375rem, 1.3rem + 0.375vw, 1.75rem);
  height: clamp(1.625rem, 1.525rem + 0.5vw, 2.125rem);
}

@media (min-width: 768px) {
  .tech-support__card {
    grid-template-columns: repeat(3, auto);
    justify-content: space-around;
    /* grid-template-columns: auto 1fr auto;*/
    align-items: center;
  }

  .tech-support__list-wrap {
    max-width: 40.625rem;
    column-gap: clamp(1.875rem, 1.375rem + 2.5vw, 4.375rem);
    row-gap: clamp(1rem, 0.8125rem + 0.9375vw, 1.9375rem);
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(2, auto);
    justify-content: space-between;
  }

  .tech-support__list-wrap .tech-support__item:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .tech-support__list-wrap .tech-support__item:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  .tech-support__list-wrap .tech-support__item:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
  }

  .tech-support__doc-wrap {
    justify-content: center;
  }
}

/* Wrench turn (js/modules/techSupportWrench.js). Pivot = the wrench head in
   the top-right corner (head occupies ≈ x 58–96%, y 0–85% of the PNG), so
   the head stays put and the handle swings. Vertically it sits ~25px below
   the top at the full 104px image height (≈ 39%). Percentages, so it stays
   correct at every rendered size. */
.tech-support__icon img {
  transform-origin: 85% 39%;
}