@mixin expanded-news-block
{
    > li > a
    {
        padding-bottom: steps(4);

        .item
        {
            display: flex;
            align-items: center;

            .image
            {
                flex-shrink: 0;
                margin-bottom: 0;
                width: steps(20);
                padding-right: steps(4);
            }
        }
    }
}

ul.news
{
    @include hover-list;

    margin-top: steps(2);

    @include for-at-least-normal-tablets
    {
        margin-top: steps(4);
    }

    > li
    {
        &:hover,
        &:focus
        {
            background-color: $color-background-lighter;
        }
    }

    > li > a
    {
        padding-top: steps(4) + 1px;
        padding-bottom: steps(2);

        &:hover,
        &:focus
        {
            background-color: transparent;
        }

        .item
        {
            .image
            {
                width: 100%;
                margin-bottom: steps(2);

                img
                {
                    width: 100%;
                    min-width: steps(16);
                    min-height: steps(10);
                }
            }

            .info
            {
                width: 100%;
                flex: 0 1 auto;

                .date
                {
                    margin-bottom: 0;
                }

                .description
                {
                    color: $color-text-darker;
                    font-weight: bold;
                }
            }
        }
    }

    &.compact
    {
        @include for-small-tablets
        {
            @include expanded-news-block;
        }

        @include for-desktops
        {
            @include expanded-news-block;
        }
    }

    &:not(.compact)
    {
        @include for-at-least-tablets
        {
            @include expanded-news-block;
        }
    }
}
