.section-page-bento {
  overflow: hidden;
  overflow-x: hidden;
  background-color: rgb(var(--background-color));
  color: rgb(var(--font-color));

  .bento-grid-container {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: 4rem;
    
    @media (max-width: 1024px) {
      grid-template-columns: 1fr;
      grid-template-rows: auto auto auto auto;
      gap: 2rem;
    }
  }

  .bento-feature {
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 0;
    height: 100%;
    
    @media (max-width: 768px) {
      min-height: 35rem;
      height: auto;
    }
    
    .block-page-content-media {
      height: 100%;
      display: flex;
      flex-direction: column;
      gap: 2rem;
      
      .block-page-text-content {
        flex: 0 0 auto;
        
        .title {
          font-size: 2rem;
          font-weight: 600;
          margin-bottom: 1rem;
          color: rgb(var(--font-color));
          
          @media (max-width: 768px) {
            font-size: 1.8rem;
          }
        }
        
        .description {
          font-size: 1.4rem;
          opacity: 0.8;
          line-height: 1.5;
        }
      }
      
      .block-page-media {
        flex: 1;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        
        img, svg, video {
          width: 100%;
          height: 100%;
          object-fit: cover;
          background-color: rgb(var(--color-background));
          border: 2px solid rgb(var(--color-foreground));
        }
      }
    }
  }


  /* Feature specific positioning */
  .bento-feature-1 {
    grid-column: 1 / 4;
    grid-row: 1;
    
    @media (max-width: 1024px) {
      grid-column: 1;
      grid-row: 1;
    }
    
  }

  .bento-feature-2 {
    grid-column: 4 / 6;
    grid-row: 1;
    
    @media (max-width: 1024px) {
      grid-column: 1;
      grid-row: 2;
    }
    
  }

  .bento-feature-3 {
    grid-column: 1 / 3;
    grid-row: 2;
    
    @media (max-width: 1024px) {
      grid-column: 1;
      grid-row: 3;
    }
    
  }

  .bento-feature-4 {
    grid-column: 3 / 6;
    grid-row: 2;
    
    @media (max-width: 1024px) {
      grid-column: 1;
      grid-row: 4;
    }
    
  }
}