.frame-type-player-card {
    .row {
        margin-bottom: -#{$grid-gutter-width};

        > div {
            margin-bottom: $grid-gutter-width;
        }
    }

    .card {
        height: 100%;

        .player-image {
            background-color: $dark;
            position: relative;
            padding-top: 75%;
            overflow: hidden;

            &::before {
                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;
                transition: $transition-base;
            }

            img {
                @include position(absolute, 20px null null 0);
                width: 100%;
            }
        }

        .player-number {
            @include position(absolute, 30px null null 35px);
            @include Rift-Bold;
            color: $secondary;
            font-size: $display3-size;
            line-height: 0.8;
            transition: $transition-base;
            transform-origin: center;
        }

        .card-body {
            align-items: center;
        }

        .card-body,
        .card-title {
            transition: $transition-base;
        }

        @include hover-focus {
            text-decoration: none;

            .player-image::before {
                transform: scale(1.1);
            }

            .player-number {
                transform: scale(1.1);
            }

            .card-body {
                background-color: $primary;
            }

            .card-title {
                color: $white;
            }
        }
    }
}