.game {
    @extend %card;

    display: flex;
    flex-direction: column;
    background: transparent;
    padding: 0;

    &--picture-wrapper {
        display: flex;
        justify-content: center;
        overflow: hidden;
    }

    &--title {
        @extend h2;
        margin: 0;
        padding: var(--space-small);
        background: var(--background-red);
        color: var(--color-on-dark);
        padding: var(--space-small) var(--space-xlarge);
    }

    &--description {
        display: flex;
        flex-direction: column;
        padding: var(--space-large) var(--space-xlarge);

        @media($mobile-breakpoint) {
            padding: var(--space-medium) var(--space-medium);
        }
    }

    &--button {
        @extend %button;
        display: flex;
        align-self: center;

        img {
            width: 2em;
            filter: invert(100%);
            margin-right: var(--space-small);
        }
    }

    &--steam-button {
        @extend %button;
        display: none;
        
        @media($mobile-breakpoint) {
            display: flex;
            align-self: center;
            align-items: center;
            margin-bottom: var(--space-small);
        }

        img {
            width: 2em;
            filter: invert(100%);
            margin-right: var(--space-small);
        }
    }

    &--steam-widget {
        align-self: center;
        padding: var(--space-small);

        @media($mobile-breakpoint) {
            display: none;
        }
    }
}
