#involvement {
    width: 100%;
    height: 100%;
}

#involvement-container {
    height: calc(100% - var(--card-padding) * 3);
    width: calc(100% - var(--card-padding) * 2);
    margin-top: var(--card-padding);
    margin-left: var(--card-padding);
}

#involvement-title {
    font-size: var(--font-size-page);
    border-left: 3px solid black;
    padding-left: var(--card-padding);
}

#involvement-bar {
    margin-top: calc(var(--card-padding) * 2);
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: space-between;
}

.involvement-item {
    aspect-ratio: 1 / 1;
    width: 30%; /* or flex-basis if inside a flex container */
    height: auto;
    cursor: pointer;
    border: none;
    border-left: 3px solid black;
    background: transparent;
    text-align: left;
    padding: 0;
    margin: 0;
    padding-left: var(--card-padding);    
}

.involvement-item > img {
    height: 85%;
    width: 85%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: 1px solid black;
    opacity: 50%;
    transition: all .3s;
}

.involvement-item > img:hover {
    opacity: 90%;
}


.involvement-item > div {
    height: 14%;
    margin: 0;
    font-size: var(--font-size-subtitle);
    font-weight: 600;
    display: flex;
    align-items: center;
    font-family: 'Fragment Mono';
}

/* Phone */
@media (max-aspect-ratio: 4/5) {
    #involvement-container {
        height: calc(100% - var(--card-padding) * 3);
        margin-top: 0;
    }
    #involvement-title {
        height: var(--card-padding);
        line-height: var(--card-padding); 
        padding: 0;
        margin: 0;
        font-weight: 600;
        border-left: none;
        border-bottom: 3px solid black;
        padding-left: 0;
        text-align: center;
    }

    #involvement-bar {
        flex-direction: column;
        height: calc(100% - var(--card-padding));
        justify-content: space-between;
        margin-top: var(--card-padding);
    }

    .involvement-item {
        width: 100%;
        height: 30%;
        cursor: pointer;
        border: none;
        border-left: none;
        text-align: left;
        padding: 0;
        margin: 0;
        padding-left: 0;    
        align-items: center;
    }
}