/* --- OUR PRODUCTS --- */

.our-products{
    display: flex;
    flex-direction: column;
}

.our-products-name{
    display: flex;
    align-items: center;
    flex-direction: column;
}

.section-title{
    font-family: var(--font-title);
    font-size: var(--font-size-card-title);
    padding-bottom: var(--padding-xs);
}

.slide-products {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
}

.slide-products div{
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
    min-width: 13em;
    margin: 0.5em;
}

.slide-products div .img-product {
    background-color: var(--color-other);
    cursor: pointer;
}

.slide-products div .img-product img {
    max-height: 15em;
}

.slide-products div .img-product:hover {
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.4);
    transition: transform 0.5s, box-shadow 0.3s;
    transform: scale(1.02);
}

.name-product{
    font-family: var(--font-title);
    color: var(--color-darkgray);
}

/* --- CARDS --- */

.card-individual {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 2em;
}

.card-individual div::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 10%, rgba(0, 0, 0, 0) 70%);
    z-index: 1; 
  }

.card-individual div {
    font-family: var(--font-title);
    width: 100vh;
    height: 20em;
    padding: 1em;
    display: flex;
    flex-direction: column;
    justify-content:end;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: background-position 1s ease-in-out;
    position: relative;
}

.card-individual div h1{
    color: var(--color-primary);   
    position: relative;
    z-index: 2;
}

.card-individual div button, .card-individual div p{
    color: var(--color-white);   
    position: relative;
    z-index: 2;
}

.card-individual div p{
    padding: 0.5em;
    font-weight: bold;
    font-size: var(--font-size-content);
    font-family: var(--font-text);
    background-color: var(--color-white);
    color: var(--color-darkgray);
    width: fit-content;
}

.card-individual div button{
    width: fit-content;
    font-size: var(--font-size-copyright);
    background-color: var(--color-darkgray);
    border: none;
    cursor: pointer;
}

.card-individual div:hover {
    background-position: center top;
}

/* --- OUR GIN --- */

.our-gin {
    margin: 0;
    background-color: var(--color-other);
    padding: 2.5em 0;
}

.our-gin-title p:first-child{
    color: var(--color-primary);
    margin-bottom: var(--margin-xs);
}

.our-gin-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;    
}

.our-gin-columns {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: top;
    flex-wrap: wrap;
}

.our-gin-columns-individual {
    width: 25em;
    justify-content: space-around;
    margin: 0 0.5em;    
}

.our-gin-columns .our-gin-columns-individual:first-of-type{
    text-align: right;
    padding: 0 3em 0 0;
}

.our-gin-columns .our-gin-columns-individual:last-of-type{
    padding: 0 0 0 3em;
}

.our-gin-section{
    padding-bottom: var(--padding-m);
}

.our-gin-columns-individual h5 {
    font-family: var(--font-title);
    font-size: var(--font-size-footer-title);
    color: var(--color-primary);
    padding-bottom: var(--padding-xxs-2);
}

.our-gin-img {
    width: 25em;
    height: 30em;
    object-fit: cover;
    object-position: center;
    padding-bottom: var(--padding-s); 
}

@media (max-width: 1247px) {
    .our-gin-columns-individual {
        width: 20em;
        display: flex;
        flex-direction: column;
        padding: 0.5em;    
    }

    .our-gin-img {
        width: 20em;
        object-fit: cover;
        object-position: center;
    }
}

@media (max-width: 1007px) {
    .our-gin-columns {
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
    }

    .our-gin-section {
        flex-direction: column;
        align-items: center;
    }

    .our-gin-title, .our-gin-columns .our-gin-columns-individual{
        text-align: left !important;
        padding-left: var(--padding-s)!important;
        padding-right: var(--padding-s)!important;
        width: auto;
    }    
    
    .our-gin-img {
        width: 100%; /* Hace que la imagen ocupe el ancho del contenedor */
        height: 20em;
        object-fit: cover;
        object-position: center;
    }
}