.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);
        font-family: 'Knewave';
        font-size: 40px;
    }

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

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

    &--more-button {
        @extend %button;
        align-self: end;
    }
}
