/* || Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html {
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
}

img, picture {
  display: block;
  width: 100%;
  height: auto;
}

input, button, textarea, select {
  font: inherit;
}

/* || Variables */
:root {
  /* colors */
  --grey-900: #151515;
  --grey-700: #444444;
  --white: #FFFFFF;
  --gold-500: #D5966C;

  /* fonts */
  --FF-h: "Big Shoulders", sans-serif;
  --FF-p: "Outfit", sans-serif;
  --FW-black: 900;
  --FW-extra-bold: 800;
  --FW-light: 300;

  --FS-p: clamp(1.125rem, 1.037rem + 0.3756vw, 1.375rem);
  --FS-h3: clamp(2rem, 1.4167rem + 2.5926vw, 3.75rem);
  --FS-h2: clamp(3.4375rem, 3.1074rem + 1.4085vw, 4.375rem);
  --FS-h1: clamp(3.75rem, 2.9577rem + 3.3803vw, 6rem);

  /* spacing */
  --space-2xs: clamp(0.25rem, -0.0141rem + 1.1268vw, 1rem);
  --space-xs: clamp(0.5rem, -0.0282rem + 2.2535vw, 2rem);
  --space-s: clamp(1rem, -0.0563rem + 4.507vw, 4rem);
  --space-m: clamp(1.25rem, -0.0704rem + 5.6338vw, 5rem);
  --space-l: clamp(1.5rem, -0.0845rem + 6.7606vw, 6rem);
  --space-xl: clamp(2rem, -0.1127rem + 9.0141vw, 8rem);
  --space-2xl: clamp(2.25rem, -0.1268rem + 10.1408vw, 9rem);
  --space-3xl: clamp(2.5rem, -0.1408rem + 11.2676vw, 10rem);
  --space-4xl: clamp(3rem, -0.169rem + 13.5211vw, 12rem);
  --space-5xl: clamp(4rem, -0.2254rem + 18.0282vw, 16rem);
}

/* || Utilities */
.wrapper {
  margin: 0 var(--space-s);
}

.img-wrapper {

}

/* || Generals */
body {
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  gap: 100px;
}

h1, h2, h3 {
  font-family: var(--FF-h), sans-serif;
  font-weight: var(--FW-black);
  line-height: 0.9;
}

h1 { font-size: var(--FS-h1); }
h2 { font-size: var(--FS-h2); }

p {
  font-family: var(--FF-p);
  font-size: var(--FS-p);
  font-weight: var(--FW-light);
  line-height: 1.4;
  max-width: 40ch;
}

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