:root {
  --fs-tech: 1.75rem;
  --bld-tech-gap-x: 1.5rem;
  --bld-gap-sub: clamp(1.5rem, calc(1.16912rem + 1.4118vw), 1.875rem);
  --bld-card-pad: clamp(1.5rem, calc(1.38971rem + 0.4706vw), 1.625rem);
  --bld-dot-gap: clamp(0.75rem, calc(0.63971rem + 0.4706vw), 0.875rem);
  --bld-gap-cardtext: clamp(0.5rem, calc(0.38971rem + 0.4706vw), 0.625rem);
  --bld-gap-ahead: clamp(2.5rem, calc(1.73469rem + 3.2653vw), 5rem);
  --bld-ahead-pad: clamp(1.75rem, calc(-0.01471rem + 7.5294vw), 3.75rem);
  --bld-ahead-gap: clamp(1.875rem, calc(0.77206rem + 4.7059vw), 3.125rem);
  --bld-gap-aheadtext: clamp(1rem, calc(0.77941rem + 0.9412vw), 1.25rem);
  --bld-tech-pad: 2.5rem;
  --bld-tech-gap: clamp(0.625rem, calc(0.51471rem + 0.4706vw), 0.75rem);
}
@media (min-width: 800px) and (max-width: 1279px) {
  :root {
    --bld-tech-gap-x: 2rem;
  }
}

@media (min-width: 1280px) {
  :root {
    --bld-gap-sub: clamp(2.25rem, calc(-0.25rem + 3.125vw), 2.875rem);
    --bld-card-pad: clamp(1.75rem, calc(1.25rem + 0.625vw), 1.875rem);
    --bld-dot-gap: clamp(0.9375rem, calc(0.6875rem + 0.3125vw), 1rem);
    --bld-gap-cardtext: clamp(0.6875rem, calc(0.4375rem + 0.3125vw), 0.75rem);
    --bld-ahead-pad: clamp(5.625rem, calc(-3.625rem + 11.5625vw), 7.9375rem);
    --bld-ahead-gap: clamp(4.375rem, calc(-3.125rem + 9.375vw), 6.25rem);
    --bld-gap-aheadtext: clamp(1.5rem, calc(0.5rem + 1.25vw), 1.75rem);
    --bld-tech-gap: clamp(0.875rem, calc(0.375rem + 0.625vw), 1rem);
  }
}
@media (min-width: 1600px) {
  :root {
    --bld-tech-pad: 2.75rem;
  }
}

.build__card { --corner-color: var(--accent-secondary); background: var(--indigo); color: var(--text-white); }

.build__caption {
  font-style: italic; font-weight: 600;
  color: var(--text-light-lavender);
}

.build__sub { margin-bottom: var(--bld-gap-sub); }
.build__list { display: grid; gap: 1.25rem; }
.bld-card {
  background: var(--text-violet);
  border-radius: 1.25rem;
  padding: var(--bld-card-pad);
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--bld-dot-gap);
}
.bld-card::before {
  content: '';
  grid-column: 1; grid-row: 1;
  width: 1rem; height: 1rem;
  border-radius: 50%;
  background: var(--bld-color, var(--accent-secondary));
  margin-top: .3em;
}

.bld-card__title { grid-column: 2; }
.bld-card__text {
  grid-column: 2;
  font-size: var(--fs-small);
  color: var(--text-light-lavender);
  margin-top: var(--bld-gap-cardtext);
}
.bld-card--1 { --bld-color: var(--accent-primary-1); }
.bld-card--2 { --bld-color: var(--accent-primary-2); }
.bld-card--3 { --bld-color: var(--accent-secondary); }
.bld-card--4 { --bld-color: var(--lavender); }

.build__ahead {
  grid-column: 2 / span 10; grid-row: 2;
  margin-top: var(--bld-gap-ahead);
  background: var(--text-violet);
  border-radius: 1.875rem;
  padding: var(--bld-ahead-pad);
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--bld-ahead-gap);
  align-items: center;
}
.build__ahead-text {
  color: var(--text-light-lavender);
  margin-top: var(--bld-gap-aheadtext);
}

.tech-box {
  position: relative;
  background: var(--indigo);
  border-radius: 1.25rem;
  padding: var(--bld-tech-pad);
  display: grid;
  gap: var(--bld-tech-gap);
  justify-items: center;
}
.tech-box__word {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 500;
  font-size: var(--fs-tech);
  letter-spacing: .02em;
  white-space: nowrap;
}

.tech-box__word--alpen { color: var(--accent-primary-1); }
.tech-box__word--dz    { color: var(--accent-secondary); }
.tech-box__word--jito  { color: var(--text-light-lavender); }

.tech-box .corner {
  width: 1.25rem; height: 1.25rem;
  --corner-inset-x: -.5rem;
  --corner-inset-y: -.5rem;
  --corner-color: var(--beige-light);
}

@media (max-width: 1279px) {
  .tech-box {
    display: flex; flex-wrap: wrap;
    justify-content: center; align-items: center;
    column-gap: var(--bld-tech-gap-x);
    row-gap: var(--bld-tech-gap);
  }
  .tech-box__word--alpen { order: 1; }

  .build .section-side { grid-row: 2; margin-top: var(--bld-gap-sub); }

  .build .build__ahead {
    grid-row: 3;
    grid-template-columns: 1fr;
    row-gap: var(--bld-ahead-gap);
  }
}
@media (max-width: 799px) {
  .build .section-intro,
  .build .section-side,
  .build__ahead { grid-column: 2 / span 10; }
}