body {
    width: calc(100vw - (100vw - 100%));
    display: grid;
    align-content: center;
    justify-content: center;
    margin: 0;
}

@media screen and (max-width: 640px) {
    .main-wrapper {
        width: 95vw;
    }
}

@media screen and (min-width: 641px) and (max-width: 1023px) {
    .main-wrapper {
        width: 90vw;
        max-width: 768px;
        align-self: center;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1280px) {
    .main-wrapper {
        width: 75vw;
        max-width: 768px;
        align-self: center;
    }
}

@media screen and (min-width: 1281px) {
    .main-wrapper {
        width: 60vw;
        max-width: 768px;
        align-self: center;
    }
}

@media print {
    .main-wrapper {
        width: 100%;
    }
}

.main-wrapper {
    display: grid;
}

.article-wrapper {
    word-break: break-word;
    word-wrap: break-word;
    hyphens: auto;
}

.article-content-wrapper .img-block {
    display: inline-grid;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    align-content: center;
}

.article-content-wrapper .img-block img {
    display: inline-block;
    border-radius: 2%;
}

.article-content-wrapper .img-block p {
    display: block;
    text-align: center;
    font-family: 'PT Astra Sans', sans-serif;
    font-size: 0.8rem;
    font-style: italic;
}

@media screen and (max-width: 640px) {
    .article-wrapper {
        display: block;
        padding: 0;
    }

    .article-content-wrapper {
        display: block;
        padding: 0;
    }

    .article-content-wrapper .img-block {
        display: inline-grid;
        grid-template-rows: auto auto;
        grid-template-columns: 1fr;
        align-content: center;
    }

    .article-content-wrapper .img-block img {
        max-width: 90%;
    }
}

@media (min-width: 641px) {
    .article-wrapper {
        display: grid;
        grid-template-columns: 30px 1fr 30px;
        margin-left: 0;
        padding: 0;
    }

    .article-content-wrapper {
        display: inline-grid;
        row-gap: 0;
        padding: 0;
        grid-column: 2;
        counter-reset: section;
    }

    .article-content-wrapper h1 {
        text-indent: 2rem;
    }

    .article-content-wrapper h2 {
        text-indent: 2rem;
    }

    .article-content-wrapper h3 {
        text-indent: 2rem;
    }

    .article-content-wrapper p {
        margin-bottom: 0.5em;
        margin-top: 0.5em;
        text-align: justify;
        text-indent: 2rem;
    }

    .article-content-wrapper h1 {
        margin-bottom: 0.25em;
        margin-top: 0.25em;
    }

    .article-content-wrapper h2 {
        margin-bottom: 0.25em;
        margin-top: 0.25em;
    }

    .article-content-wrapper h3 {
        margin-bottom: 0.25em;
        margin-top: 0.25em;
    }

    .article-content-wrapper .img-block img {
        max-width: calc(100% - 10vw);
    }
}