.top-class {
    display: flex;
    flex-direction: column;
    height: 100%;

    &-header {
        background: #e8e6e6;
        padding: .5rem;
        text-transform: uppercase;
        border-bottom: 1px solid #c9c9c8;
        font-weight: bold;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: column;

        @include media-breakpoint-up(xl) {
            flex-direction: row;
        }

    }

    &-classes {
        .nav {
            gap: .5rem;
            justify-content: center;

            @include media-breakpoint-up(xl) {
                justify-content: flex-end;
            }
        }

        .nav-link {
            padding: 0;
            position: relative;

            img {
                height: 35px;

                @include media-breakpoint-up(lg) {
                    height: 40px;
                }

                @include media-breakpoint-up(xxl) {
                    height: 50px;
                }
            }

            &.active {
                &:after {
                    content: "";
                    position: absolute;
                    height: 3px;
                    background: #6f6f6f;
                    left: 0;
                    right: 0;
                    bottom: -.3rem;

                    @include media-breakpoint-up(md) {
                        height: -.5rem;
                    }
                }
            }
        }
    }

    &-name {
        white-space: nowrap;
        flex: 1;
        font-size: 1.2rem;
        margin: .5rem;

        @include media-breakpoint-up(md) {
            margin: 0 0 0 .5rem;
        }
    }

    &-content {
        height: 100%;
        position: relative;
        overflow: hidden;
        display: flex;
        gap: 1rem;

        img {
            transform: translateY(20px);
            max-height: 340px;

            @include media-breakpoint-down(xl) {
                max-height: 325px;
            }
        }

        .info {
            flex: 1;
            padding: 1rem 1rem 1rem 0;

            .container {
                margin-top: 2rem;
                //d-flex align-items-center justify-content-center flex-column h-100
            }

            .name {
                font-size: 1.8rem;
                font-weight: bold;
                margin-bottom: .5rem;
            }
        }
    }
}