@layer layout {
  .bento-grid {
    display: grid;
    gap: 24px;
    max-inline-size: 1440px;
    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 three"
        
      ;
    }
  }

  .bento-grid > * {
    color: var(--bento-card-foreground, var(--black));
    background-color: var(--bento-card-surface, var(--white));
    padding: var(--bento-card-padding, 32px);
    border-radius: var(--bento-card-border-radius, 21px);
    overflow: clip;

    display: grid;
    gap: var(--bento-card-gap, 32px);
    align-content: var(--bento-card-vertical-alignment, start);
    align-items: var(--bento-card-vertical-alignment, start);
    justify-items: var(--bento-card-horizontal-alignment, start);
    text-align: var(--bento-card-horizontal-alignment, start);
    transition: transform 0.3s ease-out, filter 0.3s ease-out;
  }

  .subtitle {
    font-size: var(--fs-md);
    color: var(--accent-subdued);
  }

  .bento-grid > *:hover {
    transform: translateY(-0.5rem);
    filter: drop-shadow(0 0.5rem 0.1rem #0009);
  }

  .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-xl);
    --heading-span-foreground: var(--accent-base);
    --bento-card-foreground: var(--white);
    --bento-card-surface: var(--red);
    --bento-card-padding: 48px;
    --bento-card-horizontal-alignment: center;
    --bento-card-image-width: 70%;
    --bento-card-gap: 16px;
    --bento-card-vertical-alignment: center;

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

    grid-area: one;
  }

  .bento-grid> :nth-child(1) img {
    margin: auto;
  }

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

    grid-area: two;

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

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

  .bento-grid> :nth-child(3) {
    --bento-card-surface: var(--primary-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) {
    --bento-card-horizontal-alignment: center;
    --bento-card-surface: var(--primary-subdued);

    grid-area: four;

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

  }

  .bento-grid> :nth-child(5) {
    --bento-card-horizontal-alignment: center;
    --bento-card-foreground: var(--white);
    --bento-card-surface: var(--primary-base);
    --bento-card-image-width: 75%;
    --bento-card-image-order: -1;

    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) {
    --heading-font-size: var(--fs-xl);
    --heading-span-display: block;
    --heading-span-font-size: var(--fs-reg);

    --bento-card-image-width: 60%;

    grid-area: six;

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

  }

  .bento-grid> :nth-child(7) {
    --heading-span-foreground: var(--primary-base);
    --heading-span-style: italic;

    --bento-card-surface: var(--accent-subdued);
    --bento-card-image-width: 60%;


    grid-area: seven;

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

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

    grid-area: eight;

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