.player-profile {
    .hero {
        position: relative;
        background-color: $dark;
        color: $white;

        &:after {
            content: '';
            @include position(absolute, 0);
            display: block;
            opacity: .08;
            background-image: url(../img/field.jpg);
            background-repeat: no-repeat;
            background-position: center bottom;
            background-size: cover;
            filter: grayscale(100%);
            pointer-events: none;
        }

        .container {
            position: relative;
            z-index: 1;
        }

        .hero-left {
            display: flex;
            flex-direction: column;
        }

        .player-name {
            color: $white;
            font-size: $h2-font-size;
            order: 1;
            margin-bottom: 0;
        }

        .player-number {
            @include Rift-Bold;
            color: $secondary;
            font-size: $display1-size;
            line-height: 1;
        }

        // Mobile
        @include media-breakpoint-down(sm) {
            .hero-left {
                @include position (absolute, null 0 $grid-gutter-width*2);
                z-index: 2;
            }

            .player-name {
                font-size: $h3-font-size;
                text-shadow: $text-shadow;
            }

            .player-number {
                font-size: $display2-size;
            }
        }

        .player-image-wrap {
            height: 360px;
            overflow: hidden;
            object-fit: cover;
            object-position: top;
            padding-top: $grid-gutter-width;

            // Tablet
            @include media-breakpoint-between(md, md) {
                height: 420px;
            }

            // Desktop
            @include media-breakpoint-up(lg) {
                height: 600px;
            }

            img {
                max-width: 100%;
                height: auto;
            }
        }
    }

    .quick-facts {
        background-color: $gray-100;
        margin-bottom: map-get($margin, 'medium');
        overflow: hidden;
        padding: $grid-gutter-width 0;

        .wrapper {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -#{$grid-gutter-width};

            .item {
                border-right: $border-width solid $border-color;
                display: flex;
                flex-direction: column;
                padding: 0 $grid-gutter-width;

                &:last-child {
                    border-right: 0;
                }
            }
        }
    }

    .player-facts {
        display: flex;
        flex-wrap: wrap;

        .item {
            width: 100%;
            display: flex;
            flex-direction: column;
            margin-bottom: $grid-gutter-width;

            @include media-breakpoint-up(lg) {
                width: 50%;
            }
        }
    }

    .type {
        font-size: $font-size-sm;
        letter-spacing: $font-size-sm/10;
        text-transform: uppercase;
    }

    .value {
        @include Rift-Bold;
        color: $primary;
        font-size: $h4-font-size;
        letter-spacing: $h4-font-size/10;

        @include media-breakpoint-up(lg) {
            font-size: $h3-font-size;
            letter-spacing: $h3-font-size/10;
        }
    }

    .presenter {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        margin-bottom: map-get($margin, 'medium');

        span {
            font-size: $font-size-sm;
            letter-spacing: $font-size-sm/10;
            text-transform: uppercase;
            margin-right: $grid-gutter-width;
        }

        img {
            width: 50%;
        }
    }
}