body{
    background-color: #f2f2eb; 
}
.article{
    width: 60%;
    margin: 0 auto;
    padding: 20px 0 100px;
}
.capa{  
  margin: 25px auto;
}
.article>h4{
    padding: 120px 0 0 0;
    font-variation-settings:
    "wdth" 62;
    color: var(--verde3);
    font-size: 25px;
    border-bottom: 1px solid var(--verde3);
    text-transform: uppercase;
}
.article>h3{
    padding: 25px 0 0 0;
    font-size: 50px;
    font-variation-settings:
    "wdth" 62;
}
.article>h5{
    padding: 25px 0;
    font-size: 35px;
    font-variation-settings:
    "wdth" 62;
}
.article>h6{
    padding: 20px 0;
    font-size: 22px;
    font-variation-settings:
    "wdth" 62;
}
.article-data{
    color: grey;
    font-style: italic;
    font-variation-settings:
    "wdth" 62;  
}
.article>p, .article>ul, .article>ol{
    line-height: 1.6;
    padding: 10px 0;
    font-size: 18px;
    font-weight: 300;
}
.article>ul, .article>ol{
    padding: 0 0 15px 30px;
}
.article li{
    padding: 10px 0;
}
blockquote{
    border-left: 3px solid #2d2d2d;
    font-size: 18px;
    padding: 20px;
    color: #282634;
    line-height: 1.3;
}
figure{
    text-align: center;
    margin: 20px auto;
    width: 700px;
}
.article img{
    width: 700px;  
}
figcaption{
    color: gray;
    font-style: italic;
}
figure>.img-long{
    width: 400px;
}

.copyright{
    background-color: var(--salmao); 
}
.footer a:hover{
    text-decoration: underline 2px var(--salmao);
    font-style: italic;
}
@media (max-width: 480px) {
    .article{
        width: 80%;
    }
    .capa>img{
        width: 100%;
    }
    .article>h4{
    padding: 100px 0 0 0;
    font-size: 21px;
    }
    .article>h3{
        font-size: 30px;
    }
    .article>h5{
        font-size: 25px;
    }
    .article>p, .article>ul, .article>ol{
        font-size: 16px;
    }
    figure{
        width: 300px;
    }
    .article img{
        width: 300px;  
    }

}
@media (min-width: 481px) and (max-width: 1024px){
    .article{
        width: 80%;
    }
    figure{
        width: 500px;
    }
    .article img{
        width: 500px;  
    }

}
@media screen and (min-width: 1601px){
    .article{
        width: 50%;
    }}