.bento-container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 1rem;
}

@media (min-width: 1280px) {
  .bento-container {
      grid-auto-rows: 1fr;
  }
}

.bento-section {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background-color: var(--color-bg-elevated);

    .bento-body {
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .bento-title {
        font-family: var(--font-body);
        font-weight: bold;
        font-size: var(--font-size-lg);
        margin: 0 0 var(--space-xs);
        line-height: 1em;
    }

    .bento-description {
        font-family: var(--font-body);
        font-size: var(--font-size-base);
    }

    .bento-image-container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    &.bento-section-primary {
      grid-column: span 6;
      grid-row: span 4;
    }

    &.bento-section-secondary {
      grid-column: span 3;
      grid-row: span 4;
    }

    &.bento-section-tertiary {
      grid-column: span 3;
      grid-row: span 2;
    }
}