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

.gallery{
    position:relative;

    overflow:hidden;
}

.gallery-tulip{
    width:54px;
    height:68px;

    margin:0 auto 18px;

    display:block;
}

.gallery-divider{
    width:220px;

    margin:30px auto;
}

/*=========================================================
    MOSAICO
=========================================================*/

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    grid-template-rows:repeat(2, minmax(260px, 420px));

    gap:22px;

    margin-top:65px;
}

.gallery-item{
    position:relative;

    min-height:320px;

    overflow:hidden;

    border-radius:18px;

    box-shadow:
        0 24px 55px rgba(71,19,31,.12);
}

.gallery-item-large{
    grid-row:span 2;
}

.gallery-item-wide{
    min-height:320px;
}

.gallery-item img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
    object-position:center;

    transition:
        transform 1.1s ease,
        filter .8s ease;
}

.gallery-item::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(45,18,23,.16)
        );

    pointer-events:none;
}

.gallery-item:hover img{
    transform:scale(1.045);

    filter:
        saturate(.94)
        contrast(1.02);
}

/*=========================================================
    SUBIR FOTOGRAFÍAS
=========================================================*/

.gallery-upload{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 280px;

    align-items:center;

    gap:clamp(40px, 7vw, 90px);

    margin-top:90px;
    padding:58px;

    border:1px solid rgba(200,204,211,.62);
    border-radius:22px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.95),
            rgba(248,245,239,.82)
        );

    box-shadow:
        0 26px 65px rgba(71,19,31,.09);
}

.gallery-upload-content h3{
    margin-bottom:20px;

    color:var(--vino);

    font-family:var(--font-title);
    font-size:clamp(2.4rem, 5vw, 4rem);
    font-weight:500;
    line-height:1;
}

.gallery-upload-content > p:not(.section-eyebrow){
    max-width:620px;

    margin-bottom:32px;

    color:var(--texto);

    font-size:1.08rem;
    line-height:1.85;
}

.gallery-qr-link{
    display:block;

    color:inherit;
}

.gallery-qr{
    padding:24px;

    border:1px solid rgba(106,36,52,.18);
    border-radius:18px;

    background:var(--crema);

    text-align:center;

    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.gallery-qr:hover{
    transform:
        translateY(-5px)
        scale(1.015);

    border-color:rgba(106,36,52,.38);

    box-shadow:
        0 18px 34px rgba(71,19,31,.14);
}

.gallery-qr img{
    width:210px;
    max-width:100%;

    margin:0 auto 16px;

    display:block;
}

.gallery-qr span{
    color:var(--vino);

    font-size:.74rem;
    letter-spacing:2.5px;
    text-transform:uppercase;
}

/*=========================================================
    RESPONSIVE
=========================================================*/

@media (max-width:820px){

    .gallery-grid{
        grid-template-rows:auto;
    }

    .gallery-item,
    .gallery-item-large,
    .gallery-item-wide{
        min-height:360px;
    }

    .gallery-upload{
        grid-template-columns:1fr;

        padding:44px 30px;

        text-align:center;
    }

    .gallery-upload-content > p:not(.section-eyebrow){
        margin-inline:auto;
    }

    .gallery-qr-link{
        width:min(280px, 100%);

        margin-inline:auto;
    }

}

@media (max-width:600px){

    .gallery-grid{
        grid-template-columns:1fr;

        gap:18px;

        margin-top:48px;
    }

    .gallery-item,
    .gallery-item-large,
    .gallery-item-wide{
        grid-row:auto;
        min-height:420px;
    }

    .gallery-upload{
        margin-top:65px;
        padding:38px 22px;
    }

}

@media (max-width:420px){

    .gallery-item,
    .gallery-item-large,
    .gallery-item-wide{
        min-height:350px;
    }

}