.gear {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: 84px;
  padding-bottom: 88px;
  color: #e0e2e7;
  background: #202126;
}

.gear .section-top { border-color: rgba(224, 226, 231, .2); }
.gear .section-top .eyebrow { color: #aeb4bd; }
.gear-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 36px;
  margin: 78px 0 42px;
}
.gear-kicker { color: #83dfff; margin-bottom: 20px; }
.gear h2 {
  margin: 0;
  font: 400 clamp(58px, 8vw, 94px)/.92 'Jost EG', Arial, sans-serif;
  letter-spacing: .015em;
  text-transform: uppercase;
}
.gear h2 em { color: #83dfff; font-style: normal; }
.gear .gear-title { margin: 0 0 28px; }
.gear-intro {
  max-width: 340px;
  margin: 0 0 5px;
  color: #c3c6cd;
  font: 15px/1.7 'Jost EG', Arial, sans-serif;
}
.gear-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.gear-card {
  position: relative;
  min-height: 255px;
  padding: 24px 21px 20px;
  overflow: hidden;
  border: 1px solid rgba(224, 226, 231, .14);
  background: linear-gradient(145deg, rgba(255,255,255,.035), transparent 64%), #25272d;
}
.gear-card::before {
  position: absolute;
  content: '';
  top: 0;
  left: 21px;
  width: 42px;
  height: 2px;
  background: var(--prism);
  opacity: .82;
}
.gear-number { position: absolute; top: 22px; right: 20px; color: #858b95; font: 9px var(--mono); }
.gear-symbol {
  display: grid;
  width: 38px;
  height: 38px;
  margin: 10px 0 23px;
  place-items: center;
  border: 1px solid rgba(131, 223, 255, .35);
  border-radius: 50%;
  color: #83dfff;
  font: 21px/1 'Jost EG', Arial, sans-serif;
}
.gear-card .eyebrow { margin-bottom: 8px; color: #9ba1ab; font-size: 8px; }
.gear-card h3 { margin: 0 0 9px; color: #e3e4e9; font: 500 24px/1.1 'Jost EG', Arial, sans-serif; }
.gear-card > p:not(.eyebrow) { margin: 0; color: #b5bac3; font: 12px/1.55 'Jost EG', Arial, sans-serif; }
.gear-coming { display: block; margin-top: 20px; color: #83dfff; font: 8px var(--mono); letter-spacing: .1em; }

@media (max-width: 1100px) and (min-width: 761px) {
  .main-nav { gap: 20px; font-size: 10.5px; }
  .gear-card { padding-right: 16px; padding-left: 16px; }
  .gear-card::before { left: 16px; }
}

@media (max-width: 760px) {
  .gear { padding: 48px 7% 58px; }
  .gear-heading { display: block; margin: 44px 0 24px; }
  .gear-kicker { margin-bottom: 17px; font-size: 8px; letter-spacing: 1px; }
  .gear h2 { font-size: 62px; }
  .gear .gear-title { margin-bottom: 20px; }
  .gear-intro-row { display: block; margin: 16px 0 20px; }
  .gear-intro-row .gear-kicker { margin: 0; }
  .gear-intro-row .gear-intro { margin-top: 12px; }
  .gear-intro { margin-top: 18px; font-size: 13px; }
  .gear-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .gear-card { min-height: 245px; padding: 20px 16px 18px; }
  .gear-card::before { left: 16px; }
  .gear-number { top: 19px; right: 15px; }
  .gear-symbol { width: 34px; height: 34px; margin: 9px 0 20px; }
  .gear-card h3 { font-size: 21px; }
}

@media (max-width: 390px) {
  .gear-grid { grid-template-columns: 1fr; }
  .gear-card { min-height: 220px; }
}

/* Let the page content, rather than the section titles, take focus. */
.music .music-heading > h2.scroll-morph-title,
.photos .media-heading > h2.scroll-morph-title,
.videos .media-heading > h2.scroll-morph-title,
.about > h2.about-section-title,
.live .live-head > h2.scroll-morph-title,
.gear > h2.gear-title,
.connect .connect-content > h2.scroll-morph-title {
  font-size: clamp(1.9rem, 4.2vw, 3.35rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -.025em;
}