@font-face {
    font-family: "Kalam";
    src: local("Kalam Bold"),
      url("/assets/fonts/Kalam-Bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Nunito";
    src: local("Nunito Sans Regular"),
      url("/assets/fonts/nunito-sans-regular.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Nunito";
    src: local("Nunito Sans Italic"),
      url("/assets/fonts/nunito-sans-italic.woff2") format("woff2");
    font-style: italic;
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: "Nunito";
    src: local("Nunito Sans Bold"),
      url("/assets/fonts/nunito-sans-bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

:root {
  --link-color: #2762b1;
  --accent-color: #b34860;
}

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

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: Nunito, sans-serif;
  font-size: clamp(0.75rem, 2vw + 0.5rem, 1.5rem);
  line-height: 1.5;
  color: #202020;
  background-image: radial-gradient(farthest-corner at 40px 10%, #fff 10%, #d0d0d0 70%);
  background-position: -50% 0;
  background-attachment: fixed;
}

a {
  color: var(--link-color);
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.1em;
  text-decoration-color: transparent;
  transition: 200ms ease-in-out all;

  &:hover {
    text-decoration-color: var(--link-color);
  }
}

h1 {
  margin-bottom: 0;
}

h2,
h3 {
  margin-bottom: 0.25em;
}

h3 {
  color: var(--accent-color);
}

h1,
h2,
h3 {
  font-family: 'Kalam', sans-serif;
  line-height: 1.2;
  text-wrap: balance;
  text-wrap: pretty;
}


picture {
  display: block;
  margin-inline: -1rem;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

figure {
  margin-inline: 0;

  & > * {
    margin-bottom: 0.5em;
  }
}

figcaption {
  font-size: clamp(0.75rem, 1.5vw + 0.5rem, 1rem);
}

.grid {
  display: grid;
  grid-template-columns: 1fr min(60ch, 100%) 1fr;
  grid-template-areas: "h h h"
                       ". m ."
                       ". f .";
}

.header {
  grid-area: h;
  padding-inline: 1rem;
}

.hero-image {
  margin-inline: auto;
  max-height: 70vh;
}

.container {
  max-width: 60ch;
  margin-inline: auto;
}

.main {
  max-width: 60ch;
  margin-inline: auto;
  grid-area: m;
  padding-inline: 1rem;
}

.footer {
  grid-area: f;
  padding-inline: 1rem;
}

.video-container {
  margin-block: 2em;
}

.split-container {
  display: flex;
  flex-wrap: wrap;
  column-gap: 2rem;

  & > :first-child {
    flex: 1 1 32rem
  }

  & > :last-child {
    flex: 1 1 16rem
  }
}

.center {
  text-align: center;
}

.lead {
  margin-top: 0;
  font-size: clamp(1rem, 1.5vw + 0.75rem, 1.5rem);
}

.list {
  padding-left: 0;
  list-style-position: inside;
}

/*.list {
  columns: 2;
  column-width: 20rem;
  column-gap: 2rem;
  list-style: none;
  margin-bottom: 1rem;
  padding-left: 0;

  & > li {
    padding-top: .75rem;
    padding-bottom: .75rem;
    line-height: 1.5;
  }

  & > li span:first-of-type {
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.025rem;
  }

  & > li span:last-of-type {
    display: block;
  }
}*/