:root {

    /* ----- Profile Section ----- */

    /* Number of profiles at this breakpoint */
    --pf-numb: 6;

    /* Profile section width at this breakpoint */
    --pf-sec-width: calc(var(--content-width) * 0.88);

    /* Total gap between profiles at ALL breakpoints (% of the width) */
    --pf-gap: calc(var(--pf-sec-width) / 20);

    /* Single gap between profiles at ALL breakpoints */
    --pf-s-gap: calc(var(--pf-gap) / (var(--pf-numb) - 1));

    /* Profile size at ALL breakpoints */
    --pf-width: calc((var(--pf-sec-width) - var(--pf-gap)) / var(--pf-numb));

}




/*   Profiles Section   */

#profiles {
    margin: 135px auto 125px;
    width: var(--pf-sec-width);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.profiles-intro {
    width: 100%;
}

.profiles-intro-inner {
    width: 600px;
    margin: 50px auto;
    text-align: center;
}

.profiles-intro-inner h2 {
    margin-bottom: 16px;
}

.profile {
    width: var(--pf-width);
    margin-top: var(--pf-s-gap);
    cursor: pointer;
    position: relative;
    opacity: 1;
    transition: opacity 0.4s cubic-bezier(0.25,0.1,0.25,1);
}

.profile img {
    height: var(--pf-width);
    background-color: #f4f4f4;
    box-sizing: initial;
    border-bottom: 4px solid var(--white);
    filter: contrast(0.9) brightness(1.1);
}

.profile.open img { border-bottom: 4px solid var(--blue-accent); }
.profile.open p { color: var(--blue-accent); }
.fade .profile:not(.open) { opacity: 0.5; }

.profile p { 

    margin: 9.5px 0 14px; 
    font-size: 15.5px;

    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    user-select: none; 
}

.profile:hover p { color: var(--blue-accent); }

.profile:after {
    display: block;
    position: absolute;
    top: 4%;
    right: 4.4%;
    height: 13px;
    width: 13px;
    content: ' ';
    background-image: url('../img/cross_icon.svg');
    background-size: 13px 13px;

    opacity: 0.2;
    transform: rotate(45deg);
    transition: transform 0.4s ease-in-out, opacity 0.1s ease-in;
}

.profile:hover:after { opacity: 0.6; }

.profile.open:after {
    opacity: 0.6;
    transform: rotate(0deg);
}

.fade .profile:not(.open):after { opacity: 0.2; }

.profile-hidden { visibility: hidden; }

.profile-none { display: none; }






/*   Profile Accordion   */

#accordion {
    height: 0;
    overflow: hidden;
    transition: height 0.4s cubic-bezier(0.25,0.1,0.25,1);
    background-color: var(--grey-light);
    font-size: 16px;
}

/* Add inner div to fix top-padding bug */
.accordion-inner { padding: 5% 4%; }

.accordion-name { font-size: 16px; }

.accordion-description { 
    width: 70%; 
    margin: 0.5% 0 6.5%;
}

.accordion-interests { margin-bottom: 7.5px; }

.accordion-bt-container { display: flex; }

.accordion-bt-container span {
    border-radius: 5px;
    padding: 2.8px 9.3px;
    margin-right: 4px;
    background-color: var(--grey-mid);
}

.accordion-cv {
    display: flex;
    align-items: center;
    border-radius: 5px;
    padding: 2.8px 9.3px;
    margin-left: auto;
    color: var(--grey-light);
    background-color: var(--blue-accent);
    transition: background-color 0.3s ease-out;
}

.accordion-cv:hover {
    background-color: var(--blue-main);
    transition: background-color 0.3s ease-out;
}

.accordion-download-icon {
    width: 15px;
    margin-right: 8px;
    fill: var(--grey-light);
}