/* ==============================
   Bento Grid Gallery
   Same layout on all devices
============================== */

.dotit-bento-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 220px;
    gap: 16px;
}

/* Base item */
.dotit-bento-item {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background: #f3f4f6;
}

.dotit-bento-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Bento pattern */
.dotit-bento-item-1 {
    grid-column: span 2;
    grid-row: span 2;
}

.dotit-bento-item-2 {
    grid-column: span 2;
}

.dotit-bento-item-3,
.dotit-bento-item-4 {
    grid-column: span 1;
}

.dotit-bento-item-5 {
    grid-column: span 2;
}

/* Remaining images */
.dotit-bento-item:nth-child(n+6) {
    grid-column: span 1;
}

/* Hover effect */
.dotit-bento-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.08);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.dotit-bento-item:hover::after {
    opacity: 1;
}

/* ==============================
   Responsive scaling only
   (NO layout change)
============================== */

/* Tablet */
@media (max-width: 1024px) {
    .dotit-bento-gallery {
        grid-auto-rows: 200px;
        gap: 14px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .dotit-bento-gallery {
        grid-auto-rows: 250px;
        gap: 12px;
    }

    .dotit-bento-item {
        border-radius: 14px;
    }
}