.news {
    @extend %card;
    background: var(--color-surface);
    padding: 0;

    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-medium);
    
    &--header {
        display: flex;
        color: var(--color-on-dark);
        background: var(--background-red);
        padding: var(--space-small) var(--space-medium);
        align-items: center;
        gap: var(--space-small);
        font-family: 'Knewave';
        letter-spacing: 0.1rem;
        font-size: 24px;

        @media($mobile-breakpoint) {
            flex-direction: column;
        }
    }

    &--date {
        border-right: 2px solid var(--color-on-dark);
        padding-right: var(--space-small);
        font-weight: bold;

        @media($mobile-breakpoint) {
            border-right: 0;
            border-bottom: 2px solid var(--color-on-dark);

            padding-right: 0;
            padding-bottom: var(--space-small);
        }
    }

    &--title {
        flex-grow: 1;
        margin: 0;
        font-family: 'Knewave';
        letter-spacing: 0.1rem;
        font-size: 32px;

        @media($mobile-breakpoint) {
            text-align: center;
        }
    }

    &--content {
        padding: var(--space-large) var(--space-xlarge);

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