.hero_principale {
    display: flex;
    gap: 2vw;
    flex-direction: column;
}

h1 {
    font-size: var(--font-size-title-L);
}

.hero h3 {
    display: flex;
    flex-direction: row;
    font-style: normal !important;
    font-weight: var(--font-weight-text) !important;

    >a {
        margin-right: 5px;
        padding-bottom: 0 !important;
        font-size: var(--font-size-content-M) !important;
    }

    >span {
        color: var(--secondary-foreground);
        font-size: var(--font-size-content-M) !important;
    }
}

.hero h2 {
    width: 100%;
    font-size: var(--font-size-content-M);
    font-weight: var(--font-weight-text);
    font-family: "Cambay", sans-serif;
    font-style: italic;
}

.hero_aside {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 5vw;
}

.about_container {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: row;
    padding: 10vw;
    gap: 5vw;

    &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 5%;
        background-color: var(--foreground);
        width: 90%;
        height: 1px;
    }
}

.aboutCV {
    display: flex;
    flex-direction: column;
    gap: 5vw;
}

.aboutDescription {
    display: flex;
    flex-direction: column;
    gap: 3vw;

    >aside {
        width: 250px;
        border-radius: 5px 25px 5px 25px;
        height: auto;
        overflow: hidden;
        transition: border-radius 250ms ease;

        &:hover{
            border-radius: 25px 5px 25px 5px;
        }

        >img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    >article {
        display: flex;
        flex-direction: column;
        gap: 1.5vw;
    }
}

.aboutDescription h3 {
    text-indent: 50px;
    width: var(--width-content-L);
    font-size: var(--font-size-content-S);
    line-height: 180%;
    font-weight: var(--font-weight-button);
}

.skills_text-container{
    text-indent: 0 !important;
}

.photo_gc {
    scale: 1;
    filter: blur(4px) grayscale();
    transition: all 250ms ease;

    &:hover {
        filter: blur(0);
        scale: 1.2;
    }
}

.aboutMe_children-container {
    width: fit-content;
    display: flex;
    flex-direction: column;
    gap: 3vw;

    >h2 {
        position: relative;
        width: 100%;
        font-size: var(--font-size-content-XL);
        width: var(--width-content-L);
        text-transform: uppercase;
        padding-bottom: 2vw;

        &::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            background-color: var(--foreground);
            width: 3vw;
            height: 1px;
        }
    }
}

.button_general_container {
    position: relative;
    padding-top: 2vw;

    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        background-color: var(--foreground);
        width: 3vw;
        height: 1px;
    }

    >a {
        font-size: 18px;
        text-transform: uppercase;
        font-weight: 700;
        >p{
            transition: color 250ms ease;
        }
    }
}

.button_general_container a:hover p{
    color: var(--background);
    z-index: 2;
}


.journey_description {
    display: flex;
    flex-direction: row;
    gap: 5vw;

    >article {
        display: flex;
        flex-direction: column;
        gap: 2vw;
        font-weight: var(--font-weight-text);
    }
}

.journey_description h3 {
    min-width: 200px;
    font-weight: var(--font-weight-text) !important;
    font-size: var(--font-size-content-M);
}

.journey_description h4 {
    color: var(--secondary-foreground);
    font-size: var(--font-size-content-XXS);
}

.ul_square {
    list-style-type: square;
    list-style-position: inside;

    >li {
        line-height: 150%;
    }
}

.journey li::marker {
    color: var(--secondary-foreground);
}


@media (max-width: 1050px) {
    .about_container {
        flex-wrap: wrap-reverse;
        justify-content: center;
        align-items: center;
        padding: 15vw 10vw;
        gap: 10vw;
    }

    .aboutCV {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10vw;
    }

    .aboutDescription {
        justify-content: center;
        align-items: center;
        gap: 10vw;

        >article {
            gap: 3vw;
        }
    }

    .aboutDescription h3 {
        width: auto;
    }

    .photo_gc {
        filter: blur(0);
        scale: 1;
    }


    .aboutMe_children-container,
    .button_general_container {
        width: 100%;
    }

    .aboutMe_children-container h2 {
        width: auto;
        padding-bottom: 3vw;
    }

    .aboutMe_children-container h2::after,
    .button_general_container::after {
        width: 100%;
    }

    .aboutMe_children-container,
    .journey_description-mobile {
        gap: 6vw;
    }

    .button_general_container {
        padding-top: 6vw;
    }
}

@media (max-width: 750px) {

    .journey_description h3 {
        min-width: fit-content;
    }
}

@media (max-width: 500px) {

    .journey_description {
        gap: 3vw;
    }

    .aboutMe_children-container,
    .journey_description-mobile {
        gap: 10vw;
    }

    .button_general_container {
        padding-top: 10vw;
        gap: 5vw;
    }

    .journey_description {
        flex-direction: column;

        >.text_cursive {
            color: var(--secondary-foreground);
        }
    }
}