@charset "UTF-8";

@font-face {
    .xanh-mono-regular {
    font-family: "Xanh Mono", monospace;
    font-weight: 400;
    font-style: normal;
}
}

:root{

    --font-xanh: "Xanh Mono", monospace;

    --color1: #fefae0;
    --color2: #f9ebc7;
    --color3: #abad97;
    --color4: #687540;
    --color5: #584638;
    --color6: #314430;
    --color7: #877082;
    --color8: #684660;

    --box_shadow: 1px 1px 5px rgba(0, 0, 0, 0.278);
}


* {
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}

body {
    background-color: var(--color1);
    width: 100%;
}

p, h1, h2 {
    font-family: garamond, serif;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}


/*===========SECTION 1==========*/

.artigos  {
    display: grid;
    flex-direction: column;
    margin: 32px 24px 0;
}

.artigos > div {
    padding: 8px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.artigos > div > a > img {
    width: 45%;
    height: auto;
    box-shadow: var(--box_shadow);
    user-select: none;
}

.artigos > div > .texto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    user-select: none;
}

.artigos > div > .texto > h3 {
    color: var(--color8);
    font-size: 1em;
    padding-bottom: 8px;
}

.artigos > div > .texto > h1 {
    font-size: 1.2em;
}

.artigos > div > .texto > h1 > a {
    color: var(--color5);
}

.artigos > div > .texto > h1 > a:hover {
    color: #b99470;
}


@media screen and (max-width: 480px){
    

.artigos > div > a > img {
    width: 50%;
    height: auto;

}

.artigos > div > .texto {
    padding-left: 16px;
}

}

@media screen and (min-width: 481px) {
    .artigos {
        display: grid;
        grid-template-columns: 1fr 1fr ;
    }

    .artigos > div {
        width: auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .artigos > div > a > img {
        width: 100%;
        height: auto;
    }

    .artigos > div > .texto > h3 {
        padding: 8px 0;
        font-size: 1em;
    }

    .artigos > div > .texto > h1 {
        font-size: 1.4em;
    }
    
}


@media screen and (min-width: 769px){

    .artigos {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }

    .artigos > div {
        width: auto;
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .artigos > div > a > img {
        width: 100%;
        height: auto;
    }

    .artigos > div > .texto > h3 {
        padding: 8px 0;
        font-size: 1em;
    }

    .artigos > div > .texto > h1 {
        font-size: 1.4em;
    }
    

}