.background-gallery {
  color: #d7d7d7;
  font-family: "VCR", monospace;
}

.background-gallery__intro {
  margin-bottom: 16px;
  padding: 14px;

  background: #08080b;
  border: 1px solid #720000;
}

.background-gallery__intro h1 {
  margin: 0 0 8px;

  color: #ff3131;
  font-family: "NR", sans-serif;
  font-size: 28px;
  text-transform: lowercase;
}

.background-gallery__intro p {
  margin: 0;

  color: #aaa;
  font-size: 12px;
  line-height: 1.5;
}

.background-gallery__grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(180px, 1fr)
  );
  gap: 12px;
}

.background-swatch {
  padding: 8px;

  background: #050507;
  border: 1px solid #4b0000;

  outline: none;
}

.background-swatch:hover,
.background-swatch:focus-within {
  border-color: #ff3131;
}

.background-swatch__preview {
  width: 100%;
  height: 110px;

  border: 1px solid #292929;
}

.dark-stripes {
  background-color: #080808;
  background-image: repeating-linear-gradient(
    135deg,
    #080808 0,
    #080808 12px,
    #151515 12px,
    #151515 24px
  );
}

.horizontal-stripes {
  background-color: #080808;
  background-image: repeating-linear-gradient(
  to bottom,
  #080808 0,
  #080808 12px,
  #151515 12px,
  #151515 24px
  );
}

.vertical-stripes {
  background-color: #080808;
  background-image: repeating-linear-gradient(
  to right,
  #080808 0,
  #080808 12px,
  #151515 12px,
  #151515 24px
  );
}

.background-swatch__info {
  margin-top: 8px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.background-swatch__info h2 {
  margin: 0;

  color: #ddd;
  font-size: 11px;
  font-weight: normal;
}

.background-swatch__copy {
  padding: 4px 7px;

  color: #ff3131;
  background: #09090c;

  border: 1px solid #650000;

  font-family: "VCR", monospace;
  font-size: 11px;

  cursor: pointer;
}

.background-swatch__copy:hover {
  color: white;
  border-color: #ff3131;
}

.background-swatch__status {
  color: #999;
  font-size: 11px;
}

.background-swatch__code {
  position: absolute;

  width: 1px;
  height: 1px;

  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.checkerboard {
  background-color: #080808;

  background-image:
    linear-gradient(
      45deg,
      #181818 25%,
      transparent 25%
    ),
    linear-gradient(
      -45deg,
      #181818 25%,
      transparent 25%
    ),
    linear-gradient(
      45deg,
      transparent 75%,
      #181818 75%
    ),
    linear-gradient(
      -45deg,
      transparent 75%,
      #181818 75%
    );

  background-size: 24px 24px;

  background-position:
    0 0,
    0 12px,
    12px -12px,
    -12px 0;
}

.dots {
  background-color: #080808;

  background-image: radial-gradient(
    circle,
    #b00000 2px,
    transparent 2px
  );

  background-size: 20px 20px;
}

.swirls {
  background-color: #080808;

  background-image: repeating-conic-gradient(
    from 0deg,
    #080808 0deg 15deg,
    #300000 15deg 30deg
  );

  background-size: 60px 60px;
}

.plaid {
  background-color: #080808;

  background-image:
    repeating-linear-gradient(
      to right,
      transparent 0,
      transparent 22px,
      rgba(176, 0, 0, 0.45) 22px,
      rgba(176, 0, 0, 0.45) 28px,
      transparent 28px,
      transparent 34px,
      rgba(255, 255, 255, 0.08) 34px,
      rgba(255, 255, 255, 0.08) 36px
    ),
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 22px,
      rgba(176, 0, 0, 0.45) 22px,
      rgba(176, 0, 0, 0.45) 28px,
      transparent 28px,
      transparent 34px,
      rgba(255, 255, 255, 0.08) 34px,
      rgba(255, 255, 255, 0.08) 36px
    );

  background-size: 36px 36px;
}

.brick-wall {
  background-color: #1a1a1a;

  background-image:
    linear-gradient(
      #5f111b 2px,
      transparent 2px
    ),
    linear-gradient(
      90deg,
      #5f111b 2px,
      transparent 2px
    ),
    linear-gradient(
      90deg,
      #5f111b 2px,
      transparent 2px
    );

  background-size:
    64px 32px,
    64px 32px,
    64px 32px;

  background-position:
    0 0,
    0 0,
    32px 16px;

  background-repeat: repeat;
}

.zigzags {
  background-color: #242424;

  background-image:
    linear-gradient(
      135deg,
      #5c0b16 25%,
      transparent 25%
    ),
    linear-gradient(
      225deg,
      #5c0b16 25%,
      transparent 25%
    ),
    linear-gradient(
      45deg,
      #5c0b16 25%,
      transparent 25%
    ),
    linear-gradient(
      315deg,
      #5c0b16 25%,
      #242424 25%
    );

  background-position:
    20px 0,
    20px 0,
    0 0,
    0 0;

  background-size: 40px 40px;
  background-repeat: repeat;
}