/* ===========================
   HERO
=========================== */

.project-hero{
    margin-top:64px;
}

.project-hero img{
    width:100%;
    height:85vh;
    object-fit:cover;
    display:block;
}


/* ===========================
   CONTENEDOR GENERAL
=========================== */

.project-info,
.project-text,
.project-image-large,
.project-double,
.project-gallery,
.project-final{

    max-width:1400px;
    margin:70px auto;
    padding:0 40px;

}


/* ===========================
   TITULO
=========================== */

.project-info{
    text-align:center;
}

.project-info h1{

    font-size:58px;
    margin-bottom:45px;
    letter-spacing:2px;

}

.project-data{

    display:flex;
    justify-content:center;
    gap:110px;
    flex-wrap:wrap;

}

.project-data span{

    display:block;
    color:#999;
    font-size:.75rem;
    letter-spacing:2px;
    margin-bottom:10px;

}

.project-data strong{

    font-size:22px;
    font-weight:600;

}


/* ===========================
   TEXTOS
=========================== */

.project-text p{

    max-width:900px;
    margin:auto;
    line-height:2;
    text-align:justify;
    color:#d6d6d6;

}


/* ===========================
   TARJETAS
=========================== */

.project-image-large img,
.project-double img,
.project-gallery img,
.project-final img{

    width:100%;
    display:block;
    border-radius:14px;

    box-shadow:
        0 12px 35px rgba(0,0,0,.30);

}


/* ===========================
   IMAGEN GRANDE
=========================== */

.project-image-large img{

    aspect-ratio:16/9;
    object-fit:cover;

}


/* ===========================
   DOS COLUMNAS
=========================== */

.project-double{

    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:45px;
    align-items:center;

}

.project-double img{

    aspect-ratio:4/3;
    object-fit:cover;

}

.project-description h2{

    font-size:34px;
    margin-bottom:25px;

}

.project-description p{

    line-height:2;
    color:#d6d6d6;

}


/* ===========================
   GALERÍA
=========================== */

.project-gallery{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;

}

.project-gallery img{

    aspect-ratio:1/1;
    object-fit:cover;

}


/* ===========================
   IMAGEN FINAL
=========================== */

.project-final img{

    aspect-ratio:16/9;
    object-fit:cover;

}


/* ===========================
   RESPONSIVA
=========================== */

@media(max-width:992px){

.project-double{

    grid-template-columns:1fr;

}

.project-gallery{

    grid-template-columns:repeat(2,1fr);

}

.project-info h1{

    font-size:42px;

}

.project-data{

    gap:40px;

}

}

@media(max-width:768px){

.project-gallery{

    grid-template-columns:1fr;

}

.project-info,
.project-text,
.project-image-large,
.project-double,
.project-gallery,
.project-final{

    padding:0 18px;

}

.project-info h1{

    font-size:34px;

}

.project-hero img{

    height:55vh;

}

}