.expertise-container {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: 8em;
}

.expertise-container.activities {
    flex-direction: row-reverse;
    justify-content: start;
}

.expertise-container > .expertise-list,
.expertise-container > .expertise-details {
    width: calc(50% - 4em);
}

.expertise-list .expertise-name {
    position: relative;
    text-transform: uppercase;
    font-weight: 600;
    padding: .5em 2em;
    transition: padding-left .2s ease-out, background .3s ease-out;
    cursor: pointer;
    width: fit-content;
    margin: 0;
}

.expertise-list .expertise-name::before {
    content: '';
    background-color: #000000;
    width: 1em;
    height: 2px;
    position: absolute;
    left: .5em;
    top: 50%;
    transform: translateY(-50%);
    transition: width .2s ease-out;
}

.expertise-list .expertise-name:hover {
    padding-left: 4em;
}

.expertise-list .expertise-name:hover::before {
    width: 3em;
}

.expertise-list .expertise-name.active {
    background-color: var(--giuggioli-gold);
}

.expertise-details {
    font-size: 21px;
}