@import url('global.css');

/* ===================================================================
                CONTENT
=================================================================== */

.installation-project {
    margin: 60px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

    .installation-project h1 {
        font-size: 3rem;
        line-height: 3rem;
    }

    .installation-project h2 {
        font-size: 2rem;
        line-height: 2rem;
        padding-top: 20px;
    }

    .installation-project p, .installation-project h3 {
        padding-top: 20px;
        font-size: 1rem;
        line-height: 1.2rem;
        color: black;
        font-weight: 300;
    }

    .installation-project li {
        font-size: 1rem;
        line-height: 1.2rem;
        font-weight: 300;
    }

    .installation-project h3 {
        font-weight: 500;
    }

.project-title {
    display: flex;
    flex-direction: column;
}

.project-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

    .project-items .project-item {
        overflow: hidden;
    }

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


.installation-suggested {
    background-color: var(--main-lightgray);
    padding: 60px;
}

    .installation-suggested > p {
        font-size: 3rem;
        line-height: 3.2rem;
        padding-bottom: 50px;
    }

    .installation-suggested section.random-suggested {
        padding-top: 50px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

        .installation-suggested section.random-suggested a {
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

            .installation-suggested section.random-suggested a img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                display: block;
            }

            .installation-suggested section.random-suggested a p {
                font-size: 1rem;
                color:var(--main-black);
            }
            .installation-suggested section.random-suggested a p:last-child {
                font-size: 1rem;
                font-weight:300;
                color: var(--main-black);
            }

/* ===================================================================
        RESPONSIVE - TABLET E MOBILE (max-width: 1480px)
=================================================================== */
@media (max-width: 1480px) {
}




/* ===================================================================
        RESPONSIVE - TABLET E MOBILE (max-width: 1279px)
=================================================================== */

@media (max-width: 1279px) {
}


/* ===================================================================
        RESPONSIVE - TABLET E MOBILE (max-width: 1120px)
=================================================================== */
@media (max-width: 1120px) {
}


/* ===================================================================
         RESPONSIVE - MOBILE PICCOLO (max-width: 1024px)
=================================================================== */

@media (max-width: 1024px) {
    .project-items {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

/* ===================================================================
         RESPONSIVE - MOBILE PICCOLO (max-width: 768px)
         =================================================================== */

@media (max-width: 768px) {
    .installation-project h1 {
        font-size: 2.5rem;
        line-height: 2rem;
    }

    .installation-project h2 {
        font-size: 1.5rem;
        line-height: 1.5rem;
    }

    .project-items {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
    }
}
/* ===================================================================
         RESPONSIVE - MOBILE PICCOLO (max-width: 478px)
         =================================================================== */

@media (max-width: 478px) {
}