:root {
  --clr-primary: #0c2845;
  --clr-secondary: #c97741;
  --clr-tertiary: #d5d1c8;
  --clr-light: #dddddd;
  --clr-dark: #000;
}

@font-face {
  font-family: "SF Pro";
  src: url("../fonts/SF-Pro.ttf") format("truetype"); /* Path to your .ttf file */
}

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

* {
  margin: 0;
  padding: 0;
  font: inherit;
  line-height: calc(1em + 0.5rem);
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  background-color: var(--clr-primary);
  color: var(--clr-light);
  font-family: "SF Pro", sans-serif;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
}

.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: 1rem;
}

.section {
  padding-block: 1.5rem;
}

/* / XS / */
@media (min-width: 29.6875rem) {
  .container {
    max-width: 29.6875rem;
  }
}

/* / SM / */
@media (min-width: 40rem) {
  .container {
    max-width: 40rem;
  }
}

/* / MD / */
@media (min-width: 48rem) {
  .container {
    max-width: 48rem;
  }
}

/* / LG / */
@media (min-width: 64rem) {
  .container {
    max-width: 64rem;
  }
  .section {
    padding-block: 3rem;
  }
}

/* / XL / */
@media (min-width: 80rem) {
  .section {
    padding-block: 4rem;
  }
  .container {
    max-width: 80rem;
  }
}

/* / XXL / */
/* @media (min-width: 96rem) {
  .container {
    max-width: 96rem;
  }
} */