@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&display=swap");
/* ======================= */
/* CSS Reset               */
/* ======================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

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

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

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

ul,
ol {
  list-style: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

/* ----------------------------- */
/* Design System Variables       */
/* ----------------------------- */

:root {
  /* Font Sizes */
  --fs-10: 0.625rem; /* 10px */
  --fs-11: 0.6875rem; /* 11px */
  --fs-12: 0.75rem; /* 12px */
  --fs-13: 0.8125rem; /* 13px */
  --fs-14: 0.875rem; /* 14px */
  --fs-16: 1rem; /* 16px */
  --fs-18: 1.125rem; /* 18px */
  --fs-20: 1.25rem; /* 20px */
  --fs-24: 1.5rem; /* 24px */
  --fs-30: 1.875rem; /* 30px */
  --fs-36: 2.25rem; /* 36px */
  --fs-48: 3rem; /* 48px */
  --fs-60: 3.75rem; /* 60px */
  --fs-72: 4.5rem; /* 72px */
  --fs-96: 6rem; /* 96px */
  --fs-128: 8rem; /* 128px */

  /* Spacing Scale */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-7: 1.75rem; /* 28px */
  --space-8: 2rem; /* 32px */
  --space-9: 2.25rem; /* 36px */
  --space-10: 2.5rem; /* 40px */
  --space-11: 2.75rem; /* 44px */
  --space-12: 3rem; /* 48px */
  --space-14: 3.5rem; /* 56px */
  --space-16: 4rem; /* 64px */
  --space-18: 4.5rem; /* 72px */
  --space-20: 5rem; /* 80px */
  --space-24: 6rem; /* 96px */
  --space-28: 7rem; /* 112px */
  --space-32: 8rem; /* 128px */
  --space-36: 9rem; /* 144px */
  --space-40: 10rem; /* 160px */
  --space-44: 11rem; /* 176px */
  --space-48: 12rem; /* 192px */

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* colors */
  --primary-color: rgb(10, 31, 1);
  --secondary-color: rgb(117, 129, 101);
  --slide-bg: #020202;
}

/* ----------------------------- */
/* General Styles                */
/* ----------------------------- */
body {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  color: #555;
  font-style: italic;
  /* This only works if there is nothing absolutely positioned to body */
  overflow-x: auto;
  min-width: 1280px;
}

body.lock-scrollbar {
  overflow-y: scroll !important;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}
/* ----------------------------- */
/* Utility Classes               */
/* ----------------------------- */

/* ----------------------------- */
/* Components                    */
/* ----------------------------- */
*:focus {
  outline: none;
}

.loader {
  background-color: #0d2d0d;
  position: absolute;
  inset: 0;
  z-index: 9999;
  isolation: isolate;

  display: flex;
  justify-content: center;
  align-items: center;

  transition: opacity 0.3s ease-out;
}

.loader::before {
  content: "";

  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.1) 20%,
    rgba(0, 0, 0, 0.7) 50%,
    rgba(0, 0, 0, 1) 100%
  );

  z-index: -1;
}

.loader.hidden {
  opacity: 0;
  pointer-events: none;
}

.loader.block {
  opacity: 0;
  pointer-events: auto;
}

.logo-container {
  width: 235px;
  height: 266px;

  position: relative;
}

.logo-container img {
  position: absolute;
  opacity: 0;
}

/* main wrapper */
.content-grid {
  --padding-inline: 24px;
  --content-max-width: 1558px;
  --breakout-size: 350px;

  display: grid;
  grid-template-columns:
    [full-width-start] minmax(0px, 1fr)
    [breakout-start breakout-left-start] minmax(0px, var(--breakout-size))
    [content-start breakout-right-start] min(100%, var(--content-max-width))
    [content-end breakout-left-end]
    minmax(0px, var(--breakout-size)) [breakout-end breakout-right-end]
    minmax(0px, 1fr) [full-width-end];
  justify-content: center;
}

.content-grid > :not(.breakout, .full-width, .breakout-left, .breakout-right),
.full-width > :not(.breakout, .full-width, .breakout-left, .breakout-right) {
  grid-column: content;
  padding-left: var(--padding-inline);
  padding-right: var(--padding-inline);
}

.content-grid > .breakout {
  grid-column: breakout;
  /* NOTE: I don't understand why, but adding this exact value as a margin fix the responsiveness of breakout elements */
  /* It's absurd but it seems like this 50px is 'grid line' width (on devtool click on the 'grid') */
  margin-left: 50px !important;
  margin-right: 50px !important;
}

.content-grid > .breakout-right {
  grid-column: breakout-right;
}

.content-grid > .breakout-left {
  grid-column: breakout-left;
}

.content-grid > .full-width {
  grid-column: full-width;
}

.see-more-btn {
  --color: #faf5ea;
  display: inline-block;
  font-size: var(--fs-48);
  font-weight: 200;
  color: var(--color);
  background-color: #071707;
  border: 7px solid var(--color);
  padding: 0 48px;
  min-height: 96px;
}