.article {
    width: 800px;
    border: 1px dotted black;
    padding: 50px;
}
.article h1 {
    font-weight: var(--text-weight-3);
    font-size: var(--text-size-4);
    padding: 0 0 10px 0;
}
.article h2 {
    font-weight: var(--text-weight-1);
    font-size: var(--text-size-3);
    padding: 0 0 10px 0;
}
.article p {
    font-weight: var(--text-weight-0);
    font-size: var(--text-size-2);
    padding: 0 0 10px 0;
}

@media only screen and (max-width: 1200px) {
    .article {
        padding: 0 50px;
        border: unset;
        width: auto;
    }
}

@media only screen and (max-width: 700px) {
    .article {
        width: auto;
        padding: 0 10px;
        border: unset;
    }
}