@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 {
  --primary-subdued: hsl(254, 88%, 90%);
  --primary-base: hsl(256, 67%, 59%);
  --accent-subdued: hsl(31, 66%, 93%);
  --accent-base: 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-md: 2.25rem;
  --fs-lg: 3rem;
  --fs-xl: 4rem;
}

@layer reset {

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

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  ul,
  ol,
  figure {
    margin: 0;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: 500;
  }

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

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

  body {
    /* margin: 32px; */
    color: var(--black);
    font-size: var(--fs-reg);
    background: var(--off-white);
  }

  h1,
  h2 {
    color: var(--heading-foreground, inherit);
    font-size: var(--heading-font-size, var(--fs-md));
    line-height: 1.1;
    text-wrap: balance;

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

@layer layout {
  .bento-grid {
    display: grid;
    gap: 24px;
    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>* {
    background-color: var(--bento-card-background, var(--white));
    padding: var(--bento-card-padding, 30px);
    border-radius: var(--bento-card-border-radius, 21px);
    color: var(--bento-card-text-color, var(--black));
    overflow: clip;
    display: grid;
    gap: var(--bento-card-gap, 32px);
    align-items: var(--bento-card-vertical-alignment, start);
    align-content: var(--bento-card-vertical-alignment, start);
    justify-items: var(--bento-card-horizontal-alignment, start);
    text-align: var(--bento-card-horizontal-alignment, start);

  }

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

  .bento-grid> :nth-child(1) {
    --heading-font-size: var(--fs-lg);
    --bento-card-text-color: var(--white);
    --bento-card-background: var(--primary-base);
    --heading-span-foreground: var(--accent-base);
    --bento-card-horizontal-alignment: center;
    --bento-card-padding: 48px;
    --bento-card-image-width: 70%;
    --bento-card-gap: 16px;
    grid-area: one;

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

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

    >img {
      filter: drop-shadow(0 0 1rem hsl(0 0% 0% /.25));
      border-radius: 100vw;
    }

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

  .bento-grid>:nth-child(3) {
    --bento-card-background: var(--accent-base);
    grid-area: three;

    >img {

      --bento-card-image-width: 75%;
      margin-bottom: -55px;

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

  }

  .bento-grid> :nth-child(4) {
    grid-area: four;
    --bento-card-horizontal-alignment: center;
    --bento-card-background: var(--primary-subdued);

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

  .bento-grid> :nth-child(5) {
    --bento-card-image-width: 75%;
    --bento-card-image-order: -1;
    --bento-card-horizontal-alignment: center;
    --bento-card-background: var(--primary-base);
    --bento-card-text-color: var(--white);
    grid-area: five;

    @media (width > 960px) {
      --bento-card-gap: 16px;
      --bento-card-image-width: 100%;
      --bento-card-vertical-alignment: center;
      --bento-card-horizontal-alignment: start;
      grid-template-columns: 1fr 1fr;

    }
  }

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

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

  .bento-grid> :nth-child(7) {
    grid-area: seven;
    --bento-card-image-width: 60%;
    --heading-span-foreground: var(--primary-base);
    --bento-card-background: var(--accent-subdued);
    --heading-span-style: italic;

    @media (width > 960px) {
      --bento-card-vertical-alignment: center;
      --bento-card-image-width: 100%;
    }
  }

  .bento-grid> :nth-child(8) {
    grid-area: eight;
    --bento-card-background: var(--accent-base);
    --bento-card-image-width: 60%;

    @media (width > 960px) {
      --bento-card-image-width: 110%;
      --bento-card-vertical-alignment: center;
    }
  }
}

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