:root {
    --manada: #9B7C07;
    --unidad: #237440;
    --caminantes: #304DA5;
    --rovers: #C10E1A;

    --manadaUrl: url("../images/manada.png");
    --unidadUrl: url("../images/unidad.png");
    --caminantesUrl: url("../images/caminantes.png");
    --roversUrl: url("../images/rovers.png");
}

.ramasContainer {
    display: flex;
    gap: 2.2vw;
}

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

.ramas {
    border-radius: 1rem;
    background-size: contain;
    aspect-ratio: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.ramasDescription>*:nth-child(1) {
    flex: 3;
}

.ramasDescription {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
}

.schedule {
    flex: 2;
    padding: 0 1rem;
    border-left: solid 2px var(--color1);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.schedule h3 {
    color: var(--color1);
}

.ramas::after {
    content: "";
    display: flex;
    justify-content: center;
    border-radius: 100rem;
    background-color: black;
    padding: 0.5rem 1.2rem;
    border: white solid 0.25rem;
    position: absolute;
    margin-bottom: -1.5rem;
    color: var(--color2);
    font-weight: 700;
}

/* Específico a cada rama*/

.manada {
    background-image: var(--manadaUrl);
}
.manada::after {
    background-color: var(--manada);
    content: "7 - 10 años";
}

.unidad {
    background-image: var(--unidadUrl);
}
.unidad::after {
    content: "10 - 13 años";
    background-color: var(--unidad);
}

.caminantes {
    background-image: var(--caminantesUrl);
}
.caminantes::after {
    content: "14 - 17 años";
    background-color: var(--caminantes);
}

.rovers {
    background-image: var(--roversUrl);
}
.rovers::after {
    content: "18 - 21 años";
    background-color: var(--rovers);
}

/* Responsive design */

@media (orientation: portrait) {
    .ramasContainer,
    .ramasDescription {
        flex-direction: column;
        gap: 3rem;
    }

    .schedule {
        border-left: none;
    }

    .schedule h3 {
        font-size: 4vw;
    }

    .schedule h2 {
        font-size: 11vw;
    }
}