body[data-bg="bento-grid"] {
  background-color: var(--bg-bento-base);
  background-image: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.6),
      rgba(255, 255, 255, 0)
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 80px,
      rgba(148, 163, 184, 0.06) 80px,
      rgba(148, 163, 184, 0.06) 81px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 80px,
      rgba(148, 163, 184, 0.06) 80px,
      rgba(148, 163, 184, 0.06) 81px
    );
  background-size: 100% 100%, 80px 80px, 80px 80px;
  position: relative;
}

body[data-bg="bento-grid"]::before {
  content: "";
  position: fixed;
  inset: -10% -5% 0;
  background-image: linear-gradient(
      120deg,
      var(--bg-bento-card),
      var(--bg-bento-card)
    ),
    linear-gradient(120deg, var(--bg-bento-card), var(--bg-bento-card)),
    linear-gradient(120deg, var(--bg-bento-card), var(--bg-bento-card)),
    linear-gradient(120deg, var(--bg-bento-card), var(--bg-bento-card)),
    radial-gradient(
      circle,
      var(--bg-bento-ink) 1px,
      transparent 2px
    );
  background-size: 360px 220px, 260px 180px, 320px 200px, 280px 190px,
    24px 24px;
  background-position: 6% 12%, 62% 8%, 12% 68%, 68% 72%, 0 0;
  background-repeat: no-repeat;
  opacity: 0.9;
  filter: blur(0.2px);
  pointer-events: none;
  z-index: -1;
}

body[data-bg="bento-grid"]::after {
  content: "";
  position: fixed;
  inset: -10% -5% 0;
  background-image: linear-gradient(
      120deg,
      transparent 0,
      transparent 16px,
      var(--bg-bento-border) 16px,
      var(--bg-bento-border) 17px,
      transparent 17px
    ),
    linear-gradient(
      120deg,
      transparent 0,
      transparent 16px,
      var(--bg-bento-border) 16px,
      var(--bg-bento-border) 17px,
      transparent 17px
    ),
    linear-gradient(
      120deg,
      transparent 0,
      transparent 16px,
      var(--bg-bento-border) 16px,
      var(--bg-bento-border) 17px,
      transparent 17px
    ),
    linear-gradient(
      120deg,
      transparent 0,
      transparent 16px,
      var(--bg-bento-border) 16px,
      var(--bg-bento-border) 17px,
      transparent 17px
    );
  background-size: 360px 220px, 260px 180px, 320px 200px, 280px 190px;
  background-position: 6% 12%, 62% 8%, 12% 68%, 68% 72%;
  background-repeat: no-repeat;
  border-radius: 24px;
  opacity: 0.9;
  pointer-events: none;
  z-index: -1;
}