.Article {
    padding: 15px 15px;
    background-color: var(--color-layout-primary);
    border-radius: 10px
}

.Article-Header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 8px;
    font-size: 1.4rem
}

.Article-Time {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2
}

.Article-Author {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    margin-right: 15px;
    font-weight: 700
}

.Article-Title {
    margin-bottom: 10px;
    font-size: 2.5rem;
    font-weight: 500;
    color: var(--color-darkest)
}

.Article-Text {
    margin-bottom: 17px;
    font-size: 1.4rem;
    overflow: auto
}

.Article-Tags {
    margin-left: 15px
}

@media (max-width: 768px) {
    .Article-Tags {
        margin-left: 0
    }
}

.Article-Tag {
    margin-right: 15px;
    margin-bottom: 5px
}

@media (max-width: 768px) {
    .Article-Social {
        margin-bottom: 20px
    }
}

.Article-Footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-item-align: start;
    align-self: flex-start
}

@media (max-width: 768px) {
    .Article-Footer {
        display: block
    }
}

.Article-moderation-decline {
    background-color: var(--color-deny)
}

.Article-moderation-accept, .Article-moderation-decline {
    -webkit-transition: all .4s ease-in;
    transition: all .4s ease-in
}

.Article-moderation-accept {
    background-color: var(--color-accept)
}

.Article-moderation-decline.article-moderation-leave-to {
    opacity: 0;
    -webkit-transform: translateX(-50px);
    transform: translateX(-50px)
}

.Article-moderation-accept.article-moderation-leave-to {
    opacity: 0;
    -webkit-transform: translateX(50px);
    transform: translateX(50px)
}

.Article--full {
    margin-bottom: 100px
}

.ArticlePreview-Header {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.ArticlePreview-Title {
    display: block;
    margin-bottom: 10px;
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--color-darkest)
}