@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter/Inter-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter/Inter-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter/Inter-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter/Inter-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: 'Work Sans';
  src: url('/fonts/WorkSans/WorkSans-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Work Sans';
  src: url('/fonts/WorkSans/WorkSans-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Work Sans';
  src: url('/fonts/WorkSans/WorkSans-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
}

:root {
  --red: #FF0000;
  --darkRed: #6F003C;
  --green: #004B5B;
  --turquoise: #00B19C;
  --violet: #8100A1;
  --pink: #D675D8;
  --blue: #2E4FC4;
  --lightBlue: #2E4FC4;
  --white: #FFFFFF;

  --spacing-unit: 4px;
  --spacing-xs: calc(var(--spacing-unit));
  --spacing-s: calc(var(--spacing-unit) * 2);
  --spacing-m: calc(var(--spacing-unit) * 6);
  --spacing-l: calc(var(--spacing-unit) * 12);
}

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
  font-family: "Inter", sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  margin-top: var(--spacing-s);
}

.hero {
  background-color: var(--red);
  color: var(--white);

  h1 {
    font-size: 3rem;
  }

  & .black {
    font-family: 'Work Sans', sans-serif;
    font-weight: 900;
  }

  & .light {
    font-family: 'Work Sans', sans-serif;
    line-height: 0.8;
    font-weight: 300;
  }

  h2 {
    font-family: 'Work Sans', sans-serif;
    font-weight: 300;
    font-size: 1.46rem;
  }


  & .wrapper {
    max-width: 90ch;
    display: grid;
    margin: 0 auto;
  }

  & .claim {
    padding: var(--spacing-s);
  }

  & img {
    max-width: 100%;
    width: 100%;
    z-index: 1;
  }
}

@media(min-width: 1024px) {
  .hero .wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));

    & img {
      width: unset;
      max-width: 100%;
      max-height: 400px;
      z-index: 1;
    }
  }
}

nav {
  max-width: 80ch;
  margin-inline: auto;
  padding-inline: var(--spacing-s);
  margin-bottom: var(--spacing-l);
  z-index: 100;
}

blockquote {
  margin: 0;
  margin-top: var(--spacing-l);
  line-height: 1.65;
}

main {
  max-width: 80ch;
  margin: 0 auto;
  p {
    line-height: 1.65;
  }

  padding-inline: var(--spacing-s);

  & h3 {
    color: var(--darkRed);
    font-size: 1.4rem;
    font-family: 'Work Sans', sans-serif;
    font-weight: 900;
    margin-bottom: var(--spacing-xs);
  }

  section + section::before {
    display: block;
    content: "";
    border-bottom: 1px solid lightgray;
    margin-bottom: var(--spacing-m);
    margin-top: var(--spacing-m);
  }
}