@layer blocks {
  .bento-grid {
    padding-block: 4rem;
  }
  @media (min-width: 1024px) {
    .bento-grid {
      padding-block: 6.5rem;
      opacity: 0;
      transform: translateY(1.5rem);
      transition: background-color 0.45s cubic-bezier(0.5, 0, 0, 1), opacity 0.45s cubic-bezier(0.5, 0, 0, 1), transform 0.45s cubic-bezier(0.5, 0, 0, 1);
    }
    .bento-grid[data-in-view] {
      opacity: 1;
      transform: translateY(0);
    }
  }
  @media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
    .bento-grid {
      transform: none;
      transition-duration: 0ms;
    }
  }
  @media (max-width: 1023px) {
    .bento-grid__inner {
      position: sticky;
      top: var(--header-visible-height, 0);
      height: calc(100dvh - var(--header-visible-height, 0));
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
  }
  .bento-grid__heading {
    padding-bottom: 2rem;
    color: var(--theme-text-primary);
    transition: color 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  @media (min-width: 1024px) {
    .bento-grid__heading {
      padding-bottom: 4rem;
    }
  }
  .bento-grid-cards {
    display: flex;
    flex-direction: column;
    border-radius: 1rem;
  }
  @media (max-width: 1023px) {
    .bento-grid-cards {
      position: relative;
      overflow: clip;
    }
  }
  @media (min-width: 1024px) {
    .bento-grid-cards {
      flex-direction: row;
      gap: 0.5rem;
      aspect-ratio: 25/11;
    }
  }
  @media (max-width: 1023px) {
    .bento-grid .bento-card[data-bento-mobile] {
      position: absolute;
      inset: 0;
      aspect-ratio: auto;
      will-change: transform;
    }
    .bento-grid .bento-card[data-card-is-stacked] {
      border-radius: 0;
    }
  }
}