:root {
  /* color */
  --brand-red: #EB1A13;
  --brand-red-shade-14: #CC1710;
  --brand-blue: #1F44DB;
  --white: #FFFFFF;
  --white-shade-16: #D6D6D6;
  --white-shade-28: #B8B8B8;
  --black: #000000;
  --black-tint-12: #1F1F1F;

  /* font family */
  --f-r: 'ZalandoSans-Regular', sans-serif;
  --f-m: 'ZalandoSans-Medium', sans-serif;
  --f-b: 'ZalandoSans-Bold', sans-serif;

  /* font size */
  --fs-96-40: clamp(2.5rem, 0.9091rem + 5.6566vw, 6rem);
  --fs-32-24: clamp(1.5rem, 1.2727rem + 0.8081vw, 2rem);
  --fs-24-20: clamp(1.25rem, 1.1364rem + 0.404vw, 1.5rem);
  --fs-20-16: clamp(1rem, 0.8864rem + 0.404vw, 1.25rem);
  --fs-14: 0.875rem;

  /* letter spacing */
  --neg-4: calc(-1 * 0.04);
  --neg-3: calc(-1 * 0.03);
  --neg-2: calc(-1 * 0.02);
  --neg-1: calc(-1 * 0.01);
  --zero: 0;

  /* line height */
  --lh-150: 1.5;
  --lh-125: 1.25;
  --lh-100: 1;

  /* space */
  --sp-1440: 90rem;
  --sp-1030: 64.375rem;
  --sp-913: 57.063rem;
  --sp-563: 35.188rem;
  --sp-447: 27.938rem;
  --sp-440: 27.5rem;
  --sp-350: 21.875rem;
  --sp-330: 20.625rem;
  --sp-300: 18.75rem;
  --sp-280: 17.5rem;
  --sp-224: 14rem;
  --sp-128-48: clamp(3rem, 0.7273rem + 8.0808vw, 8rem);
  --sp-137-20: clamp(1.25rem, -2.0739rem + 11.8182vw, 8.5625rem);
  --sp-120-48: clamp(3rem, 0.9545rem + 7.2727vw, 7.5rem);
  --sp-64-48: clamp(3rem, 2.5455rem + 1.6162vw, 4rem);
  --sp-56: 3.5rem;
  --sp-48: 3rem;
  --sp-40: 2.5rem;
  --sp-33: 2.0625rem;
  --sp-32: 2rem;
  --sp-32-20: clamp(1.25rem, 0.9091rem + 1.2121vw, 2rem);
  --sp-30-16: clamp(1rem, 0.6023rem + 1.4141vw, 1.875rem);
  --sp-24: 1.5rem;
  --sp-20: 1.25rem;
  --sp-16: 1rem;
  --sp-12: 0.75rem;
  --sp-8: 0.5rem;
  --sp-4: 0.25rem;
  --sp-3: 0.1875rem;
  --sp-2: 0.125rem;
  --sp-1: 0.0625rem;

  /* style */
  --border: var(--sp-1) solid var(--bg-shade-9);

  /* animation */
  --anime-time: 0.3s;
  --anime-func: ease-in-out;
}
@font-face {
  font-family: 'ZalandoSans-Regular';
  src: url('/assets/font/ZalandoSans-VariableFont.woff2') format('woff2');
  font-variation-settings: 'wght' 400;
  font-style: normal;
}
@font-face {
  font-family: 'ZalandoSans-Medium';
  src: url('/assets/font/ZalandoSans-VariableFont.woff2') format('woff2');
  font-variation-settings: 'wght' 500;
  font-style: normal;
}
@font-face {
  font-family: 'ZalandoSans-Bold';
  src: url('/assets/font/ZalandoSans-VariableFont.woff2') format('woff2');
  font-variation-settings: 'wght' 700;
  font-style: normal;
}
* {
  &::selection {
    background-color: var(--bg-shade-9);
  }

  &:not(html, body) {
    /* Firefox */
    scrollbar-width: none;

    /* hide windows edge scroll bar arrow */
    -ms-overflow-style: none;

    /* hide scroll bar on Chrome, Safari, Opera */
    &::-webkit-scrollbar {
      display: none;
    }
  }
}
body {
  background-color: var(--black);
  color: var(--white);
}
at-inner {
  display: block;
  margin-inline: auto;
  padding-block: var(--sp-128-48);
  padding-inline: var(--sp-30-16);
  max-width: var(--sp-1440);
}
img {
  width: 100%;
}
:where(h2) {
  margin-block-end: var(--sp-64-48);
}
:where(button) {
  border: none;
}