@media (min-width: 768px) {
    html, body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        height: 100vh;
    }

    .restaurantes-container {
        display: flex;
        width: 100vw;
        max-height: 110vh;
        position: relative;
    }

    .restaurante {
        flex: 1;
        overflow: hidden;
        padding: 20px;
        border-radius: 10px;
        cursor: pointer;
        opacity: 1;
        transform-origin: center center;
        min-width: 0;
        max-width: 50vw;
        z-index: 1;
        transition: flex 2s ease, opacity 1s ease, transform 2s ease, max-width 2s ease;
    }

    .restaurante:hover {
        flex-grow: 2;
        max-width: 62vw; /* agora expande até 70% */
        transform: scale(1.01);
        z-index: 2;
    }

    .restaurantes-container:has(.restaurante1:hover) .restaurante2,
    .restaurantes-container:has(.restaurante2:hover) .restaurante1 {
        opacity: 0.3;
        pointer-events: none;
        max-width: 38vw; /* reduz o outro para 30% */
        transform: scale(0.98);
        transition: flex 2s ease, opacity 1s ease, transform 2s ease, max-width 2s ease;
    }
}