@font-face {
  font-family: "Jost";
  font-display: swap;
  src:
    url("/assets/fonts/jost-vf.woff2") format("woff2"),
    url("/assets/fonts/jost-vf.woff") format("woff");
}

@font-face {
  font-family: "Lexend";
  font-display: swap;
  src:
    url("/assets/fonts/lexend-vf.woff2") format("woff2"),
    url("/assets/fonts/lexend-vf.woff") format("woff");
}

@font-face {
  font-family: "Victor Mono";
  font-display: swap;
  src:
    url("/assets/fonts/victor-mono.woff2") format("woff2"),
    url("/assets/fonts/victor-mono.woff") format("woff");
}

html {
  --normal-font: Jost, sans-serif;

  scroll-behavior: smooth;
}

body {
  --line-color: #5551;
  --color: #0c8c0c;

  background-color: #0c0c0c;
  font-family: var(--normal-font);
  background-image:
    repeating-linear-gradient(
      to bottom,
      var(--line-color) 0 1px,
      transparent 1px 25px
    ),
    repeating-linear-gradient(
      to right,
      var(--line-color) 0 1px,
      transparent 1px 25px
    );
}

.wrapper {
  max-width: 1024px;
  width: 100%;
  margin: auto;
  display: flex;
  align-items: center;

  @media (width <= 900px) {
    width: auto;
  }
}

.models {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;

  header {
    display: flex;
    margin-left: 200px;
    font-family: var(--normal-font);
    position: sticky;
    top: 0;
    z-index: 5;

    .mini { --color: green; --size: 285px; }
    .small { --color: #ada51f; --size: 140px; }
    .medium { --color: #bc6208; --size: 125px; }
    .large { --color: #a41010; --size: 275px; }

    & > div {
      border-top: 10px solid var(--color);
      color: #fff;
      font-weight: 600;
      text-align: center;
      width: var(--size);
      padding-bottom: 5px;
      margin-bottom: 10px;
      text-transform:uppercase;
      font-size: 12px;
    }
  }
}

family-models {
  padding: 1px 0;
}