.background-image-container {
    overflow: hidden;
    transition: height 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.background-image-container-expanded {
    height: 20vh;
}

.background-image-container-collapsed {
    height: 12vh;
}

.background-image {
    width: 100%;
    height: 20vh;
    object-fit: cover;

    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);

    will-change: transform;
    opacity: 0.5;
}

.background-image-expanded {
    transform: scale(1);
}

.background-image-collapsed {
    transform: scale(1.03);
    filter: blur(10px);

}

.year {
    position: absolute;
    left: 10%;
    top: 12%;
    z-index: 1250;

    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);

    will-change: transform;
}

.year-expanded {
    transform: translateY(0);
}

.year-collapsed {
    transform: translateY(40px);
}

.profile-picture {
    height: 150px !important;
    width: 150px !important;
    z-index: 1200;
    transition:
        width 350ms cubic-bezier(0.4, 0, 0.2, 1),
        height 350ms cubic-bezier(0.4, 0, 0.2, 1),
        margin-top 350ms cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: -4%;
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);

    will-change: transform;
}

.profile-picture-expanded {
    transform: scale(1);

}

.profile-picture-collapsed {
    transform: scale(.6);

}

.profile-paper {
    border-radius: 15px;
    margin-top: -5%;
    /* overflow: hidden; */
    z-index: 1200;
    transition:
        height 300ms cubic-bezier(0.22, 1, 0.36, 1);

    will-change: height;
}

.paper-expanded {

    height: 18vh;
}

.paper-collapsed {
    height: 13vh;
}