.bento-grid-container-cf9d0190 {
    width: 100%;
    /* We don't use overflow: hidden here anymore to allow bleed */
    padding: 20px 0;
}

.bento-grid-wrapper-cf9d0190 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 250px; /* Base row height */
    grid-auto-flow: dense; /* Fill all blank spaces */
    gap: 16px;
    width: 100%;
    max-width: 100%;
    overflow: hidden; /* Prevent horizontal scroll on wrapper */
}

.bento-item-cf9d0190 {
    position: relative;
    border-radius: 12px;
    opacity: 0; /* Hidden by default for animation */
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.8s ease-out;
    will-change: transform, opacity;
    /* Normally overflow: hidden is here, but we manage it per item */
    overflow: hidden;
}

/* Bleed effect - removes overflow hidden to let child scale out */
.bento-item-cf9d0190.has-bleed {
    overflow: visible;
    z-index: 10; /* Keep it above others */
}

/* Grid Spans */
.bento-span-1x1 { grid-column: span 1; grid-row: span 1; }
.bento-span-2x1 { grid-column: span 2; grid-row: span 1; }
.bento-span-1x2 { grid-column: span 1; grid-row: span 2; }
.bento-span-2x2 { grid-column: span 2; grid-row: span 2; }

/* Image Container */
.bento-item-inner-cf9d0190 {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.4s ease;
    border-radius: inherit; /* inherit from parent */
}

/* Hover effects */
.bento-item-cf9d0190:hover .bento-item-inner-cf9d0190 {
    transform: scale(1.05);
}

/* Bleed hover effect - scales larger to bleed over edges */
.bento-item-cf9d0190.has-bleed:hover .bento-item-inner-cf9d0190 {
    transform: scale(1.15);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    z-index: 20;
}

/* Animation Starting States */
.bento-item-cf9d0190.anim-left { transform: translateX(-150px); }
.bento-item-cf9d0190.anim-right { transform: translateX(150px); }

/* Animation End State (In View) */
.bento-item-cf9d0190.is-visible {
    opacity: 1;
    transform: translateX(0);
}

/* Fallback for editor mode so items are always visible */
.elementor-editor-active .bento-item-cf9d0190 {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .bento-span-2x2 { grid-column: span 2; grid-row: span 1; }
    .bento-span-1x2 { grid-column: span 1; grid-row: span 1; }
}

@media (max-width: 767px) {
    .bento-span-2x1, .bento-span-2x2 { grid-column: span 1; }
}