/*********************************/
/* Grid                          */
.grid {
    display: grid;
    grid-template-columns: auto;
    grid-gap: 1rem;
    margin-bottom: 2rem;

    .grid-item {
        --bs-aspect-ratio: 100%;
        position: relative;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        transition: background-color 0.3s ease;

        &.ratio-prodotto {
            --bs-aspect-ratio: 125%;
        }

        &:hover {
            background-color: rgba(255, 255, 255, 0.5);
            background-blend-mode: overlay;
        }

        .grid-item-title {
            left: auto;
            top: auto;
            bottom: 0;
            height: auto;
            padding: 1rem;
            margin: 0;
            font-size: 1.2rem;
            font-weight: bold;
            background: rgba(26, 79, 104, 0.6);
            color: #fff;
        }

        &.titolo-piccolo{
            .grid-item-title{
                font-size: 1.2rem;
                background: rgba(255,255,255,0.5);
                padding: 1rem;
            }
        }
    }
}
@media (min-width: 768px) {
    .grid {
        grid-template-columns: auto auto auto;

        .grid-item {

            &.ratio-2x1 {
                --bs-aspect-ratio: 50%;
                grid-column: span 2;
            }

            &.ratio-3x1 {
                --bs-aspect-ratio: 25%;
                grid-column: span 3;
            }

            &.ratio-1x2 {
                --bs-aspect-ratio: 150%;
                grid-row: span 2;
            }
        }
    }
}