BentoGrid.module.scss

.bentoGrid {
  display: grid;
  grid-gap: var(--static-space-24);
  padding: var(--static-space-24);
  animation: fadeIn var(--transition-duration-micro-medium)
    var(--transition-eased);
  background-color: var(--background-surface);
}

.gridItem {
  background-color: var(--surface-background);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-m);
  overflow: hidden;
  transition: transform 0.2s ease-in-out;
  padding: var(--static-space-16);

  &:hover {
    transform: scale(1.02);
  }
}

.gap-xs {
  gap: var(--static-space-4);
}

.gap-s {
  gap: var(--static-space-12);
}

.gap-m {
  gap: var(--static-space-24);
}

.gap-l {
  gap: var(--static-space-48);
}

.gap-xl {
  gap: var(--static-space-64);
}

/* Padding Sizes */
.padding-xs {
  padding: var(--static-space-4);
}

.padding-s {
  padding: var(--static-space-12);
}

.padding-m {
  padding: var(--static-space-24);
}

.padding-l {
  padding: var(--static-space-48);
}

.padding-xl {
  padding: var(--static-space-64);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .bentoGrid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}