@font-face {
  font-family: "TeleNeo";
  src: url("../assets/fonts/teleneo/TeleNeo-Var.woff2") format("woff2"),
       url("../assets/fonts/teleneo/TeleNeo-Var.woff") format("woff");
  font-weight: 100 900;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
}

#cgr-park {
  --cgr-park-font-family: "TeleNeo", system-ui, -apple-system, sans-serif;
  --cgr-park-fs-title: 24px;
  --cgr-park-color-text: #000;
  --cgr-park-color-surface: #fff;
  --cgr-park-logo-size: 96px;
  --cgr-park-spacing-block: 16px;
  --cgr-park-spacing-inline: 16px;
  --cgr-park-offset-top: 80px;
  --cgr-park-offset-inline: 20px;

  display: grid;
  place-items: start center;
  min-block-size: 100dvh;
  padding-inline: var(--cgr-park-offset-inline);
  padding-block: min(var(--cgr-park-offset-top), 17.5dvh) 3rem;
  font-family: var(--cgr-park-font-family);
  color: var(--cgr-park-color-text);
  background-image: url("../assets/img/cgr-park-main.jpg");
  background-size: cover;
  background-position: center 25%;

  .hero-content {
    display: flex;
    background-color: var(--cgr-park-color-surface);
  }

  svg {
    flex-shrink: 0;
    inline-size: var(--cgr-park-logo-size);
    block-size: var(--cgr-park-logo-size);
  }

  .hero-title {
    display: flex;
    align-items: center;
    margin: 0;
    padding: var(--cgr-park-spacing-block) var(--cgr-park-spacing-inline);
    font-size: var(--cgr-park-fs-title);
    font-weight: 500;
    line-height: 1.2;
    text-wrap: balance;
  }
}

@media (min-width: 768px) {
  #cgr-park {
    --cgr-park-fs-title: 36px;
    --cgr-park-offset-top: 160px;
    --cgr-park-spacing-inline: 24px;
  }
}

@media (min-width: 1024px) {
  #cgr-park {
    --cgr-park-offset-top: 210px;
  }
}

@media (min-width: 1280px) {
  #cgr-park {
    --cgr-park-fs-title: 48px;
  }
}