@import url('_geral.css?v=0.1');

.header{
    padding: 1rem 0 0;
}

.logo{
    max-width: 388px;
    margin: 0 auto;
    & img{
        width: 100%;
    }
}

.nav{
    border-top: solid 1px #ccc;
    border-bottom: solid 1px #ccc;
    margin: 1rem 0;
    padding: .8rem 0;
    & ul{
        display: flex;
        gap: 4rem;
        font-size: 1.25rem;
        color: #5A5957;
        & a{
            color: inherit;
            font-weight: 600;
            &:hover{
                color: #D00000;
            }
        }
    }
}

.title--cat{
    color: #D00000;
    font-size: 1.25rem;
    font-weight: 600;
}

.grid--column{
    margin-top: .5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    & .item--column{
        display: flex;
        gap: .5rem;
        & h2{
            font-weight: 600;
            font-size: 1.25rem;
        }
        & p{
            font-weight: 100;
            font-size: .9rem;
        }
    }
}

.line--columns{
    border-bottom: solid 1px #ccc;
    margin: 1rem 0
}

.article{
    width: 100%;
    & a{
        display: block;
        position: relative;
        & span{
            position: absolute;
            left: .6rem;
            top: .6rem;
            text-transform: uppercase;
            background-color: #D00000;
            color: #fff;
            padding:.4rem .6rem;
            font-size: .8rem;
        }
        & h2{
            font-weight: 600;
            font-size: 1.37rem;
            padding: .3rem .3rem;
        }
    }
}

.section--1{
    display: grid;
    grid-template-columns: calc(77% - 1rem) 23%;
    gap: 1rem
}
.secundary{
    display: grid;
    align-content: space-between;
}

.section--2{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1rem
}

.section--3{
    margin-top: 2rem;
}

.jornal{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin: .5rem 0 2rem;
    & div span{
        display: block;
        width: 100%;
        text-align: center;
        padding-top:.5rem;
        color: #7F7E7E
    }
}

.page{
    /* & h1{
        margin-bottom: 1rem;
    } */
    & img{
        max-width: 100%;
    }
    & p{
        margin: .8rem 0;
        text-indent: 1rem;
    }
    hr{
        border-color: #ccc;
        margin-bottom: .7rem;
    }
    .small{
        color: #8e8e8e;
        margin: .7rem;
        display: block;
    }
    .por{
        color:#8e8e8e;
        font-size: .8rem;
        margin-bottom: 3
    }
}

aside{
    & .linha{
        border-bottom: solid 1px #ccc;
        margin-bottom: .5rem
    }
    & .article{
        border-bottom: solid 1px #ccc;
        margin-bottom: 1rem;
        &:nth-last-child(1){
            border: none;
        }
    }
}

.footer{
    text-align: center;
    margin: 2rem 0 .3rem;
    background-color: #ccc;
    padding:1rem;
}

@media (max-width: 737px){
    .logo{
        width: 70%;
        margin-bottom: 1rem
    }
    .nav{
        display: none;
    }
    .title--cat{
        font-size: 1rem;
    }
    .grid--column{
        grid-template-columns: 1fr;
        & .item--column{
            & h2{
                font-size: 1rem;
            }
            & p{
                font-size: .8rem;
            }
        }
    }
    .mobile{
        padding: 0 .7rem;
    }
    .section--1{
        grid-template-columns: 1fr;
    }
    .secundary{
        gap: 1rem;
    }

    .section--2, .section--3{
        grid-template-columns: repeat(2, 1fr);
        & .article a h2{
            font-size: .9rem;
        }
    }

    .jornal{
        grid-template-columns: 1fr 1fr;
    }

    .page{
        & h1{
            font-size: 1.5rem;
            font-weight: 600;
        }
    }
}