article {
    max-width: 860px;
}

.article-container {
    background-color: #fff;
    color: #000;
    border-radius: 10px 10px;
    padding: 30px 65px 30px 65px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    width: 100%;
}

@media screen and (max-width: 767px) {
    .article-container {
        border-radius: 10px 10px;
        padding: 10px 25px 10px 25px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
        width: 100%;
    }
}

.article-container a:not(.btn),
.article-container a:hover:not(.btn) {
    color: var(--blue);
    fill: var(--blue);
}


a.author-name-link:not(.btn),
a.author-name-link:hover:not(.btn) {
    text-decoration: underline;
    font-weight: bold;
    color: var(--dark);
}

.article-header {
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-family: Roboto, sans-serif;
    font-size: 32px;
    font-weight: bold;
    border-bottom: 2px solid var(--yellow);
}

.article-container-row {
    display: inline-flex;
    max-width: 100%;
}

.article-body img {
    max-width: 100%;
    height: auto;
}

.article-info {
    display: flex;
    justify-content: flex-end;
    min-width: 200px;
}

.article-author {
    display: inline-table;
}

.author-image-container {
    display: grid;
}

.author-image {
    width: 75px;
    margin-left: auto;
    margin-right: auto;
}

.author-text-container {
    display: grid;
}

.grey {
    color: var(--gray);
}

.offer-block {
    background-color: var(--dark);
    color: var(--light);
    border-radius: 10px 10px;
    padding: 10px 20px 10px 20px;
    margin: 20px 0 20px 0;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    max-width: 750px;
}

.offer-block-elem {
    margin: 5px 0 5px 0;
}

.offer-block-header {
    font-size: x-large;
    font-weight: bold;
}

.offer-block-footer-button {
    min-width: 100px;
}

.article-content {
    max-width: 90%;
    overflow: auto;
    font-family: Lora, self-serif;
    font-size: 20px;
    line-height: 28px;
}

@media screen and (max-width: 767px) {
    .article-container-row {
        display: block;
        overflow: auto;
        text-align: justify;
    }

    .article-info {
        display: block;
        justify-content: unset;
    }

    .article-content {
        max-width: 100%;
    }
}


.article-footer {
    padding: 30px 0px 30px 0px;
    width: 100%;
}

.draft {
    color: var(--danger);
}

.article-disclaimer {
    /*padding: 15px;*/
}