.frame-type-next-game {
    position: relative;
    background-color: $dark;
    color: $white;
    overflow: hidden;

    .frame-container {
        position: initial;
    }

    &: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;
    }

    .game {
        @include Rift-Regular;
        font-size: $h5-font-size;
        text-align: center;

        h2 {
            @include Rift-Regular;
            color: $white;
            font-size: $h3-font-size;
            letter-spacing: $h3-font-size/10;
        }

        time {
            @include Rift-Bold;
            color: $secondary;
        }
    }

    .home,
    .guest {
        align-items: center;
        display: flex;
        @include Rift-Regular;

        .logo {
            margin: 0 $grid-gutter-width;
            width: 60px;
            height: auto;
        }

        h3 {
            @include Rift-Bold;
            color: $white;
            font-size: $h5-font-size;
            letter-spacing: $h5-font-size/10;
            margin-bottom: 0;
        }
        
        span {
            font-size: $h5-font-size;
            letter-spacing: $h5-font-size/10;
        }
    }

    .guest {
        flex-direction: row-reverse;

        .text {
            text-align: right;
        }
    }

    .ctas {
        text-align: center;

        .btn {
            margin: $grid-gutter-width/2;
        }
    }

    .presenter {
        @include position(absolute, null null 0 0);
        @include Rift-Bold;
        background-color: white;
        box-shadow: $box-shadow;
        color: $body-color;
        display: flex;
        font-size: $font-size-sm;
        text-align: center;
        white-space: nowrap;
        z-index: 1;

        img {
            max-width: 90px;
        }

        @include media-breakpoint-up(md) {
            padding: $grid-gutter-width/2 $grid-gutter-width;
            flex-direction: column;
            width: 150px;
        }
    }

    @include media-breakpoint-down(sm) {
        padding-bottom: 100px;

        .presenter {
            align-items: center;
            padding: $btn-padding-y $btn-padding-x;

            span {
                margin-right: 10px;
            }
        }
    }
}