/* -------- FUZZCO CASE STUDY --------
   Values from the fuzzco-2015 theme's original SCSS: three colors, a 3px
   stroke, a 12-column grid with a 3% gutter. */
body.fuzzco-page {
  --fz-red: #F72E2A;
  --fz-yellow: #FFFF00;
  background: #fff;
  color: var(--fz-red);
}

body.fuzzco-page a:hover {
  color: var(--fz-red);
  background: var(--fz-yellow);
  border-bottom-color: var(--fz-red);
}

body.fuzzco-page ::selection {
  background: var(--fz-yellow);
}

body.fuzzco-page main h2 {
  font-size: 32px;
  font-weight: 400;
  margin: 24px 0 16px;
}

body.fuzzco-page main h1 {
  font-weight: 400;
}

body.fuzzco-page hr {
  border-top: 3px solid var(--fz-red);
}

body.fuzzco-page .jump {
  text-align: center;
}

body.fuzzco-page figcaption {
  opacity: 1;
}

body.fuzzco-page main img {
  outline: 3px solid var(--fz-red);
  outline-offset: -3px;
}

.fz-tall {
  max-width: 900px;
  margin: 0 auto;
}

.fz-stage {
  box-sizing: border-box;
  border: 3px solid var(--fz-red);
  padding: clamp(20px, 4vw, 48px);
}

.fz-colors {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  text-align: left;
  font-size: 15px;
}

.fz-colors i {
  display: block;
  height: 120px;
  background: var(--c);
  border: 3px solid var(--fz-red);
  margin-bottom: 12px;
}

.fz-colors .fz-stroke i {
  background: linear-gradient(var(--fz-red), var(--fz-red)) center / 100% 3px no-repeat;
  border: 0;
}

.fz-colors span,
.fz-colors code {
  display: block;
}

.fz-colors code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
}

@media (max-width: 700px) {
  .fz-colors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}