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

.hero {

    height: 65vh;

    background-image: url("../assets/img/fondohero.png");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* ========================================
   COLLABORATORS
======================================== */

.collaborators {

    padding: 5rem 0;

    background-color: var(--white);
}


/* TITLE */

.section-title {

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 2rem;

    margin-bottom: 4rem;
}

.section-title h2 {

    color: var(--green-primary);

    font-size: 2rem;
    font-weight: 800;
}

.section-line {

    flex: 1;

    max-width: 400px;

    height: 2px;

    background-color: var(--green-light);
}


/* GRID */

.collaborators__grid {

    display: grid;

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

    gap: 3rem;

    align-items: center;
}


/* CARD */

.collaborator {

    padding: 2rem;

    display: flex;
    justify-content: center;
    align-items: center;

    border-right: 1px solid #e5e5e5;
}

.collaborator:last-child {

    border-right: none;
}

.collaborator img {

    max-width: 240px;

    object-fit: contain;

    transition: 0.3s;

    cursor: pointer;
}

.collaborator img:hover {

    transform: scale(1.03);
}


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

@media (max-width: 992px) {

    .hero {

        height: 55vh;
    }

    .collaborators__grid {

        grid-template-columns: 1fr;
    }

    .collaborator {

        border-right: none;

        border-bottom: 1px solid #e5e5e5;
    }
}

@media (max-width: 768px) {

    .hero {

        height: 55vh;
    }

    .section-title {

        flex-direction: column;
    }

    .section-line {

        display: none;
    }
}