@import url(main.css);

main .hero {
    background-image: url(assets/about-hero.jpeg);
}

section#gob-section .visual {
    background-image: url(assets/about-gob.jpeg);
}

/* ------------------------------------- */

#mission-section ul {
    list-style: none;
    padding: 0;
}

#mission-section h3 {
    color: var(--sl-color-primary-900);
}

/* ------------------------------------- */

#values-section {
    background-color: transparent;
}

#values-section ul {
    list-style: none;
    padding: 0;
    gap: 0.5rem;
}

.tenent {
    border: 1px solid var(--sl-color-primary-900);
    border-radius: 0.25rem;
    background-color: white;
    padding: 1rem;

    display: flex;
    flex-direction: column;

    transform: scale(95%);
    transition: transform 0.5s ease-in-out;
}

.tenent:hover {
    transform: scale(100%);
    transition: transform 0.5s ease-in-out;
}

.tenent h3 {
    color: var(--sl-color-primary-900);
}

.tenent sl-icon {
    color: var(--sl-color-primary-900);
    font-size: 3rem;
    align-self: center;
    margin: 0.5rem;
}

/* ------------------------------------- */

#commitment-section {
    background-color: transparent;
}

#commitment-section ul {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 0.5rem;
}

.objective {
    --accent-color: silver;
    background-color: white;

    flex-basis: 25vw;
    flex-grow: 1;
    padding: 1rem;
    box-shadow: 0 0 0.5rem #00000088;

    display: flex;
    flex-direction: column;
    font-weight: bold;
    color: var(--accent-color);

    transform: scale(95%);
    transition: transform 0.5s ease-in-out;
}

.objective:hover {
    transform: scale(100%);
    transition: transform 0.5s ease-in-out;
}

.objective:nth-child(4n + 1) {
    --accent-color: #056222;
}

.objective:nth-child(4n + 2) {
    --accent-color: #440e6d;
}

.objective:nth-child(4n + 3) {
    --accent-color: #e0893d;
}

.objective:nth-child(4n + 4) {
    --accent-color: #d2ae1e;
}

.objective :first-child {
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.objective sl-icon {
    color: var(--accent-color);
    font-size: 3rem;
    margin: 1rem;
    align-self: center;
}

/* ------------------------------------- */

/* LANDSCAPE */
@media (min-aspect-ratio: 1) {
    #values-section ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .tenent:last-child {
        grid-column: 1/-1;
    }

    /* ------------------------------------- */

    #commitment-section ul {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* PORTRAIT */
@media (max-aspect-ratio: 1) {
    #values-section ul {
        display: flex;
        flex-direction: column;
    }

    /* ------------------------------------- */

    #commitment-section ul {
        flex-direction: column;
    }
}