:root {
    --buenaAccion: url("../images/buenaAccion.png");
    --compromiso: url("../images/compromiso.png");
    --responsabilidad: url("../images/responsabilidad.png");
    --leyScout: url("../images/leyScout.png");
}

section:has(.valoresContainer) {
    padding-bottom: 3vw;
}

.valoresContainer {
    display: flex;
    gap: 2.2vw;
    margin-bottom: 1.5rem;
}

.valoresContainer>div {
    display: flex;
    flex: 1;
    gap: 2.2vw;
}

.valores {
    background-color: #0005;
    border-radius: 1rem;
    background-size: contain;
    aspect-ratio: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-size: 1rem;
    margin-bottom: 2rem;
    background-size: cover;
    cursor: pointer;
}

.valores::after {
    margin-bottom: -4vw;
    font-size: 2.2vw;
}

.buenaAccion::after {
    content: "La buena acción";
}

.compromiso::after {
    content: "Compromiso";
}

.responsabilidad::after {
    content: "Responsabilidad";
}

.leyScout::after {
    content: "La ley scout";
}

.buenaAccion {
    background-repeat: no-repeat;
    background-position: center;
    background-size: inherit;
    background-image: var(--buenaAccion);
}

.compromiso {
    background-image: var(--compromiso);
}

.responsabilidad {
    background-image: var(--responsabilidad);
}

.leyScout {
    background-image: var(--leyScout);
}

.arrowContainer {
    display: flex;
    height: 1.5rem;
    padding: 0 3vw;
    gap: 2.2vw;
}

.arrowContainer>div {
    display: flex;
    flex: 1;
    gap: 2.2vw;
}

.arrowContainer>div>div {
    background-image: url("../icons/arrow.svg");
    background-size: contain;
    background-position: bottom;
    display: flex;
    flex: 1;
    gap: 2.2vw;
}

.arrow {
    visibility: hidden;
}

.carousel-item {
    max-height: 720px;
    aspect-ratio: 1 / 1;
    width: 100%;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    max-height: 720px;
    object-fit: cover;
}