/* Bento Grid Container */
.bento-grid {
    display: grid;
    grid-template-columns: 488fr 688fr; /* Based on section widths */
    gap: 20px;
    width: 100%;
}

/* Left image - Controls the height */
.bento-left {
    overflow: hidden;
    aspect-ratio: 488 / 581;
}
.bento-left img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

/* Right column */
.bento-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Top-right image */
.bento-top {
    overflow: hidden;
    aspect-ratio: 688 / 329;
    width: 100%;
}
.bento-top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

/* Bottom-right row (Images 3 & 4) */
.bento-bottom {
    display: grid;
    gap: 20px;
}

/* Layout variations */
.bento-bottom.layout-equal {
    grid-template-columns: 1fr 1fr;
}
.bento-bottom.layout-equal > div {
    aspect-ratio: 337 / 231;
}

.bento-bottom.layout-left-wide {
    grid-template-columns: 433fr 231fr;
}
.bento-bottom.layout-left-wide > div:first-child {
    aspect-ratio: 433 / 231;
}
.bento-bottom.layout-left-wide > div:last-child {
    aspect-ratio: 231 / 231;
}

.bento-bottom.layout-right-wide {
    grid-template-columns: 231fr 433fr;
}
.bento-bottom.layout-right-wide > div:first-child {
    aspect-ratio: 231 / 231;
}
.bento-bottom.layout-right-wide > div:last-child {
    aspect-ratio: 433 / 231;
}

.bento-bottom > div {
    overflow: hidden;
}
.bento-bottom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

/* Responsive for mobile/tablet */
@media (max-width: 768px) {
    .bento-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        max-height: none;
    }
    .bento-left,
    .bento-right {
        height: auto;
    }
    .bento-right {
        grid-template-rows: auto;
    }
    .bento-bottom {
        grid-template-columns: 1fr;
    }
}