@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

#containerMosaic{
    
    --largura: 1000px;
    width: var(--largura);
    margin-top: 50px;
    margin-bottom: 50px;
    margin-left: calc(50% - (var(--largura) / 2));
    display: grid;
    grid-template-rows: calc(var(--largura) / 5.5) calc(var(--largura) / 5.5);
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas:
    "img1 img3 img3 img4 img5"
    "img2 img3 img3 img6 img6";
    padding: 30px;
    padding-bottom: 20px;
    gap: 20px;
    border-radius: 15px;
    text-align: center;

    @media (max-width: 1100px) {
        --largura: 600px;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-areas:
        "img1 img3 img3"
        "img4 img4 img5"
        "img2 img6 img6";
        grid-template-rows: calc(var(--largura) / 3.3) calc(var(--largura) / 3.4) calc(var(--largura) / 3.3);
    }

    @media (max-width: 600px) { display: none; }

    #img1{ grid-area: img1 }
    #img2{ grid-area: img2 }
    #img3{ grid-area: img3 }
    #img4{ grid-area: img4 }
    #img5{ grid-area: img5 }
    #img6{ grid-area: img6 }
    
    #img1, #img2, #img3, #img4, #img5, #img6{
        
        position: relative;
        border-radius: 10px;
        box-shadow: 3px 3px 10px #000;
        
        img{
            position: relative;
            width: 100%;
            height: 100%;
            border-radius: 10px;
            z-index: 1;
        }
        .cover{
            position: absolute;
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
            width: 100%;
            height: 100%;
            border-radius: 10px;
            z-index: 2;
            background: none;
            top: 0;
            left: 0;
            color: #fff;
            padding-bottom: 15px;
            padding-right: 15px;
            box-sizing: border-box;
            font-family: "Rubik", sans-serif;
            font-size: 20px;
            font-weight: 500;
            background: linear-gradient(180deg, transparent, rgba(75, 0, 130, 0.4));
            transition: 0.7s;
            cursor: pointer;
        }
    }
}