.hero.portraits {
    padding-bottom: 0;
}

.portraits .container {
    position: relative;
    overflow: hidden;
}

.profile-portrait {
    position: absolute;
    bottom: 0;
    cursor: pointer;
}

.profile-portrait img {
    transform: scale(1);
    transition: filter 0.5s ease-in, transform 0.4s ease-out;
}

.portraits .desaturated img {
    filter: saturate(0.4) brightness(0.5);
}

#keacte {
    left: calc(50% - 7rem);
    z-index: 2;
}

#major {
    right: 0;
    z-index: 1;
}

#skipp {
    left: 0;
    z-index: 1;
}

.portraits .focused {
    z-index: 5 !important;
}

.portraits .focused img {
    transform: scale(1.05);
    z-index: 5 !important;
}

.profile-portrait .character-name {
    font-size: 1.6rem;
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: -4rem;
    opacity: 0;
    transition: bottom 0.3s, opacity 0.3s;
}

.profile-portrait.focused .character-name {
    bottom: 1.6rem;
    opacity: 1;
}

@media screen and (max-width: 459px) {
    .portraits .container {
        width: 32rem;
        height: 20rem;
    }

    .profile-portrait img {
        height: 18rem;
    }
}

@media screen and (min-width: 460px) {
    .portraits .container {
        width: 46rem;
        height: 24rem;
    }

    .profile-portrait img {
        height: 22rem;
    }

    #keacte {
        left: calc(50% - 8rem);
    }

    #major {
        right: calc(50% - 22em);
    }

    #skipp {
        left: calc(50% - 22em);
    }

    .profile-portrait.focused .character-name {
        bottom: 1.8rem;
    }
}

@media screen and (min-width: 768px) {
    .portraits .container {
        width: 70rem;
        height: 30rem;
    }

    .profile-portrait img {
        height: 28rem;
    }

    #keacte {
        left: calc(50% - 10rem);
    }

    #major {
        right: calc(50% - 28rem);
    }

    #skipp {
        left: calc(50% - 27rem);
    }

    .profile-portrait .character-name {
        font-size: 2rem;
    }

    .profile-portrait.focused .character-name {
        bottom: 2rem;
    }
}

@media screen and (min-width: 1280px) {
    .portraits .container {
        width: 70rem;
        height: 38em;
    }

    .profile-portrait img {
        height: 36rem;
    }

    #keacte {
        left: calc(50% - 13rem);
    }

    #major {
        right: calc(50% - 35rem);
    }

    #skipp {
        left: calc(50% - 35rem);
    }

    .profile-portrait.focused .character-name {
        font-size: 2.4rem;
        bottom: 2.2rem;
    }
}