@font-face {
  font-family: "DM Sans";
  font-weight: 400 500;
  src: url("./assets/fonts/DMSans-VariableFont_opsz\,wght.ttf");
}

@font-face {
  font-family: "DM Sans";
  font-style: italic;
  font-weight: 400 500;
  src: url("./assets/fonts/DMSans-Italic-VariableFont_opsz\,wght.ttf");
}

:root {
  --purple-100: hsl(254, 88%, 90%);
  --purple-500: hsl(256, 67%, 59%);
  --yellow-100: hsl(31, 66%, 93%);
  --yellow-500: hsl(39, 100%, 71%);
  --white: hsl(0, 0%, 100%);
  --off-white: hsl(0, 0%, 96%);
  --black: hsl(0, 0%, 7%);

  --fs-reg: 1.25rem;
  --fs-med: 2rem;
  --fs-lg: 3rem;
  --fs-xl: 4rem;
}

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

  /* https://kilianvalkhof.com/2022/css-html/your-css-reset-needs-text-size-adjust-probably/ */
  html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure,
  blockquote,
  dl,
  dd {
    margin: 0;
  }

  /* https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html */
  [role="list"] {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  body {
    min-block-size: 100vh;
    line-height: 1.6;
    font-size: 15px;
  }

  h1,
  h2,
  h3,
  button,
  input,
  label {
    line-height: 1.1;
  }

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

  p,
  li {
    text-wrap: pretty;
  }

  img,
  picture {
    max-inline-size: 100%;
    display: block;
  }

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

@layer base {
  html {
    font-family: "DM Sans", sans-serif;
    line-height: 1.3;
  }

  body {
    margin: 2rem;
    color: var(--black);
    font-size: var(--fs-reg);
    background: var(--off-white);
  }

  h1,
  h2 {
    color: var(--heading-color, inherit);
    font-size: var(--heading-font-size, var(--fs-med));
    line-height: 1.1;
    font-weight: 500;

    span {
      display: var(--heading-span-display, inline);
      color: var(--heading-span-color, var(--black));
      font-size: var(--heading-span-font-size, inherit);
      font-style: var(--heading-span-style);
    }
  }

  .attribution {
    font-size: 1rem;
    text-align: center;
  }
  .attribution a {
    color: var(--purple-500);
  }
    .attribution a:hover {
    color: var(--purple-100);
  }
}

@layer layout {
  .bento-grid {
    display: grid;
    gap: 1.5rem;
    max-inline-size: 1200px;
    margin-inline: auto;
    grid-template-areas:
      "one"
      "two"
      "three"
      "four"
      "five"
      "six"
      "seven"
      "eight";

    @media (width > 660px) {
      grid-template-areas:
        "one one"
        "two three"
        "four six"
        "four seven"
        "five eight";
    }

    @media (width > 960px) {
      grid-template-areas:
        "seven one one four"
        "seven two three four"
        "eight two three four"
        "eight six five five";
    }
  }

  .bento-grid > * {
    color: var(--bento-card-color, var(--black));
    background-color: var(--bento-card-bg, var(--white));
    padding: var(--bento-card-padding, 1.5rem);
    border-radius: var(--bento-card-border-radius, 1.25rem);
    overflow: clip;

    display: grid;
    gap: var(--bento-card-gap, 2rem);
    align-items: var(--bento-card-vertical-align, start);
    align-content: var(--bento-card-vertical-align, start);
    justify-items: var(--bento-card-horizontal-align, start);
    text-align: var(--bento-card-horizontal-align, start);
  }

  .bento-grid img {
    max-width: var(--bento-card-img-width, 100%);
    width: var(--bento-card-img-width, 100%);
    order: var(--bento-card-img-order);
  }

  .bento-grid > :nth-child(1) {
    grid-area: one;
    --heading-font-size: var(--fs-xl);
    --heading-span-color: var(--yellow-500);
    --bento-card-color: var(--white);
    --bento-card-bg: var(--purple-500);
    --bento-card-horizontal-align: center;
    --bento-card-padding: 3rem;
    --bento-card-img-width: 70%;
    --bento-card-gap: 1rem;

    @media (width > 960px) {
      --bento-card-img-width: 45%;
    }
  }

  .bento-grid > :nth-child(2) {
    grid-area: two;
    --bento-card-img-order: -1;

    /* fixing shadow issue */
    > img {
      filter: drop-shadow(0 0 1rem hsl(0 0% 0% / 0.25));
      border-radius: 100vw;
    }

    @media (width > 960px) {
      --bento-card-vertical-align: center;
      --bento-card-img-width: 150%;
    }
  }

  .bento-grid > :nth-child(3) {
    grid-area: three;
    --bento-card-bg: var(--yellow-500);

    > img {
      --bento-card-img-width: 75%;
      margin-bottom: -55px;

      @media (width > 960px) {
        --bento-card-img-width: 100%;
        margin-bottom: -125px;
      }
    }
  }

  .bento-grid > :nth-child(4) {
    grid-area: four;
    --bento-card-horizontal-align: center;
    --bento-card-bg: var(--purple-100);

    @media (width > 960px) {
      --bento-card-vertical-align: center;
      --bento-card-horizontal-align: start;
      --bento-card-img-width: 180%;
    }
  }

  .bento-grid > :nth-child(5) {
    grid-area: five;
    --bento-card-bg: var(--purple-500);
    --bento-card-color: var(--white);
    --bento-card-horizontal-align: center;
    --bento-card-img-width: 60%;
    --bento-card-img-order: -1;

    @media (width > 960px) {
      grid-template-columns: 1fr 1fr;
      --bento-card-horizontal-align: start;
      --bento-card-vertical-align: center;
      --bento-card-gap: 1rem;
      --bento-card-img-width: 100%;
    }
  }

  .bento-grid > :nth-child(6) {
    grid-area: six;
    --heading-span-display: block;
    --heading-span-font-size: var(--fs-reg);
    --heading-font-size: var(--fs-xl);
    --bento-card-img-width: 60%;

    @media (width > 960px) {
      --bento-card-img-width: 80%;
    }
  }

  .bento-grid > :nth-child(7) {
    grid-area: seven;
    --bento-card-bg: var(--yellow-100);
    --bento-card-img-width: 60%;
    --heading-span-color: var(--purple-500);
    --heading-span-style: italic;

    @media (width > 960px) {
      --bento-card-horizontal-align: start;
      --bento-card-vertical-align: center;
      --bento-card-gap: 1rem;
      --bento-card-img-width: 100%;
    }
  }

  .bento-grid > :nth-child(8) {
    grid-area: eight;
    --bento-card-bg: var(--yellow-500);
    --bento-card-img-width: 60%;

    @media (width > 960px) {
      --bento-card-img-width: 110%;
      --bento-card-vertical-align: start;
    }
  }
}

@layer utilities {
  .visually-first {
    order: -1;
  }
}