.Wrapper{
    display: grid;
    grid-template-columns: repeat( 2 , 1fr );
    gap: 4rem;
    justify-content: space-between;
    align-items: end;
}
.Wrapper-col{
    max-height: 25rem;
}
/*
Sección izquierda con los textos y botones
- Estilo de la parte superior que incluye los titulares y textos
- Estilo de la cabecera / column-reverse para que el h3 vaya después del h2 en el html pero visualmente se vean al revés
- Estilo de los titulares
- Estilos del texto
- Estilos de la caja con los botones 
*/
.Information{
    display: flex;
    flex-direction: column;
    justify-content: end;
    gap: 2rem;
    font-size: var(--fs-regular);
    color: var(--c-primary-100);
}
.Information-content{
    display: flex;
    flex-flow: column;
    gap: 1rem;
}
.Information-title{
    display: flex;
    flex-direction: column-reverse;
    gap: .5rem;
    position: sticky;
    top: 0;
}
.Information-h2{
    font-size: var(--fs-huge);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
}
.Information-h3{
    font-size: var(--fs-small);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    color: var(--c-primary-50);
}
/* Texto contraído */
.Information-texts{
    max-height: 8.35rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
    transition: max-height 1s ease;
}
/* Teexto expandido al hacer hover */
.Information-content:hover .Information-texts{
    max-height: 14rem;
}
.Information-buttons{
    width: fit-content;
    display: flex;
    flex-flow: row nowrap;
    gap: 1.25rem;
}
/* Animaciones */
.Information-content , .Information-buttons , .Gallery{
    animation: fadeIn .28s ease both;
}
.Information-content.isFading , .Information-buttons.isFading , .Gallery.isFading{
    animation: fadeOut .28s ease both;
}


/*
Galería de imágenes relativas a los tours
-Grid con imágenes
-Cuadro de imagen
-Estilo cuando está activo / más grande y brillante
-Estilo cuando no está activo / más oscuro
-Estilos de los cuadros cuando se hace hover / más oscuro o claro si se hace o no hover
*/
.Gallery{
    min-height: 25rem;
    display: grid;
    grid-template-columns: repeat( 3 , 1fr);
    gap: 1rem;
}
.Gallery-img{
    min-height: 100%;
    border: 6px solid var(--c-primary-25);
    border-radius: var(--br-square);
    filter: brightness(1);
    transition: border-color 1s ease , scale 1s ease , filter 1s ease;
    overflow: hidden;
}
.Gallery-img.isActive{
    border-color: var(--c-primary-50);
    scale: 1.05;
}
.Gallery-img:not(.isActive){
    filter: brightness(.75);
}
.Gallery:hover .Gallery-img{
    filter: brightness(.5);
}
.Gallery:hover .Gallery-img:hover{
    scale: 1.1;
    filter: brightness(1);
}




/* Responsive pantallas grandes */
@media (min-width: 1600px){
    .Gallery{
        min-height: 30rem;
    }
    .Information-content:hover .Information-texts{
        max-height: 19rem;
    }
}


/* Responsive portatil */
@media (max-width: 1328px){
    .Wrapper {
        grid-template-columns: 1fr .75fr;
        gap: 4rem;
    }
    .Information-texts:hover {
        max-height: 19rem;
    }
    .Gallery{
        min-height: 29rem;
        grid-template-columns: 1fr;
    }
    .Gallery-img{
        max-height: 8rem;
    }
}

@media (max-width: 1200px){
    .Information-buttons{
        /* flex-flow: column; */
        line-height: 150%;
    }
}


/* Responsive pantallas pequeñas */
@media (max-width: 960px){
    .Wrapper{
        grid-template-columns: 1fr;
        gap: 2rem;
        align-content: end;
    }
    .Wrapper-col{
        min-height: 10rem;
    }
    .Information{
        width: 66%;
        gap: 1.25rem
    }
    .Information-content , .Information-buttons{
        gap: .5rem;
    }
    .Information-content:hover , .Information-content:hover .Information-texts {
        max-height: 15rem;
    }
    .Gallery{
        grid-template-columns: repeat( 3 , 1fr );
    }
}


/* Responsive Tablet */
@media (max-width: 768px){
    .Wrapper{
        align-content: end;
        gap: 2rem;
    }
    .Information{
        width: 100%;
        min-height: 22rem;
        gap: 1rem;
    }
    .Information-texts{
        max-height: 10rem;
    }
    .Gallery{
        min-height: 9rem;
    }
}


/* Responsive Módvil */
@media (max-width: 480px){
    .Wrapper{
        padding: 12dvh 1rem 6dvh;
        align-content: center;
        gap: 2rem;
    }
    .Information-content:hover .Information-texts{
        max-height: 12rem;
    }    
    .Gallery{
        min-height: 12rem;
        gap: .5rem;
    }
}