* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    max-width: 100vw; 
    overflow-x: hidden;
}

.conteudo_topico{
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    width: 900px;
    height: auto;
    font-family: "Inter";
}
.conteudo_topico .titulo_topico{
    order:1;
    display: flex;
    flex-direction: row;
    margin: 0;
}
.titulo_topico .line{
    border:3px solid #00756A;
    height: 50px;
    width: 0;
    border-radius: 6px;
    margin: 0px;
    margin-top: 5px;
    margin-right: 5px;
}
.titulo_topico h1{
    font-weight: 600;
    font-size: 50px;
    margin: 0;
    margin-left: 5px;
}
.bloco_topico_principal{
    order:2;
    display: flex;
    flex-direction: row;
    margin-top: 30px;
    width: 100%;
    height: 100%;
    gap: 10px;
}
.bloco_topico_principal .materia_principal{
    width: 45%;
    height: auto;
}
.bloco_topico_principal .bloco_materia{
    text-decoration: none;
}
.bloco_topico_principal .materia_principal img{
    width: 400px;
    height: 200px;           /* Define altura fixa */
    border-radius: 22px;
    margin: 0;               /* Remove centralização automática */
    cursor: pointer;
    object-fit: cover;    
}
.bloco_topico_principal .materia_principal h4{
    font-weight: 600;
    font-size: 25px;
    margin-top: 5px;
    cursor: pointer;
    color: black;
    text-decoration: none;
}
.bloco_topico_principal .materia_principal h4:hover{
    text-decoration: underline;
}
.bloco_topico_principal .materia_principal a{
    font-size: 20px;
    color: #575757;
    margin-top: 5px;
    cursor: pointer;
}
.bloco_topico_principal .materia_principal a:hover{
    text-decoration: underline;
}

.bloco_topico_principal .materia_secundaria{
    width: 27%;
    height: auto;
    text-decoration: none;
}
.bloco_topico_principal .materia_secundaria img{
    width: 240px;
    height: 160px;           /* Define altura fixa */
    border-radius: 22px;
    margin: 0;               /* Remove centralização automática */
    cursor: pointer;
    object-fit: cover; 
}
.bloco_topico_principal .materia_secundaria h4{
    font-weight: 600;
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 10px;
    cursor: pointer;
    color: black;
    text-decoration: none !important;
}
.bloco_topico_principal .materia_secundaria h4:hover{
    text-decoration: underline !important;
}
.bloco_topico_principal .materia_secundaria a{
    font-size: 16px;
    color: #575757;
    margin-top: 10px;
    cursor: pointer;
}
.bloco_topico_principal .materia_secundaria a:hover{
    text-decoration: underline;
}
.line_bottom{
    width: 100%;
    height: 1px;

}
.materia_principal .line_bottom{
    margin-top: 5%;
}
.materia_secundaria .line_bottom{
    margin-top: 113px;
}
.conteudo_materia {
    order: 3;
    position: relative;
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    width: 100%;
    height: auto;
    min-height: 200px;
    padding: 0px;
    border-top: 2px solid #C0C0C0;
}
.conteudo_materia .bloco_materia{
    margin-top: 10px;
    width: 25%;
    height: auto;
    text-align: start;
    color: black;
    text-decoration: none;
}
.conteudo_materia .bloco_materia img{
    width: 180px;
    height: 130px;         /* Define altura fixa */
    border-radius: 22px;
    margin: 0;               /* Remove centralização automática */
    cursor: pointer;
    object-fit: cover; 
}
.conteudo_materia .bloco_materia h4{
    font-family: "Inter";
    text-align: start;
    margin-top: 10px;
    cursor: pointer;
}
.conteudo_materia .bloco_materia a{
    font-family: "Inter";
    text-align: start;
    margin-top: 5px;
    color:#575757;
    cursor: pointer;
}
.conteudo_materia .bloco_materia h4:hover{
    text-decoration: underline;
}
.conteudo_materia .bloco_materia a:hover{
    text-decoration: underline;
}

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

    .conteudo_topico{
        margin-top: 30px;
        margin-left: 0px;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        font-family: "Inter";
        padding: 20px;
    }
    .bloco_topico_principal{
        order:1;
        margin-left: 0px;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        margin: 0;
    }
    .bloco_topico_principal .materia_principal{
        order:1;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        margin-top: 20px;
        padding-bottom:20px;
        border-bottom: 2px solid #C0C0C0;
    }
    .bloco_topico_principal .materia_principal img{
        order:1;
        width: 100%;
        height: auto;         /* Define altura fixa */
        border-radius: 22px;
        margin: 0;               /* Remove centralização automática */
        cursor: pointer;
        object-fit: cover; 
    }
    .texto_bloco_topico{
        order: 2;
        display: flex;
        flex-direction: column;
    }
    .bloco_topico_principal .materia_principal h4{
        font-size: 25px;
        margin-left: 10px;
        margin-top: 10px;
    }
    .bloco_topico_principal .materia_principal a{
        font-size: 20px;
        margin-left: 10px;
        margin-top: 10px;
    }

    .bloco_topico_principal .line_bottom{
        display: none;
    }
   
.bloco_topico_principal .materia_secundaria {
    order: 2;
    display: flex;
    flex-direction: row;
    align-items: flex-start; /* Alinha texto e imagem no topo */
    width: 100%;
    border-bottom: 2px solid #C0C0C0;
    padding-bottom: 10px;
    margin: 0;
    margin-top: 10px;
}

.bloco_topico_principal .materia_secundaria img {
    width: 300px;
    height: 200px;
    border-radius: 22px;
    margin: 0;
    margin-right: 10px; /* Pequeno espaço entre imagem e texto */
    cursor: pointer;
    object-fit: cover;
    flex-shrink: 0;
}

.bloco_topico_principal .materia_secundaria h4,
.bloco_topico_principal .materia_secundaria a {
    margin: 0;
    padding: 0;
    cursor: pointer;
    text-align: left;
}

.bloco_topico_principal .materia_secundaria h4 {
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 8px; /* Espaço entre título e link */
}

.bloco_topico_principal .materia_secundaria a {
    font-size: 15px;
    color: #575757;
}



.conteudo_materia {
    order: 3;
    position: relative;
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    width: 100%;
    height: auto;
    min-height: 200px;
    padding: 0px;
}
.conteudo_materia .bloco_materia{
    width: 25%;
    height: 95%;
    text-align: start;
    color: black;
    text-decoration: none;
}
    .conteudo_materia .bloco_materia img{
    width: 150px;
    height: 120px;
    border-radius: 22px;
    margin: 0;
    margin-right: 10px; /* Pequeno espaço entre imagem e texto */
    cursor: pointer;
    object-fit: cover;
    flex-shrink: 0;
    }
    .bloco_materia .texto_bloco_materia h4{
        font-family: "Inter";
        text-align: start;
        font-size: 16px;
        margin-top: 10px;
        cursor: pointer;
    }
 .bloco_materia .texto_bloco_materia  a{
        font-family: "Inter";
        text-align: start;
        font-size: 10px;
        margin-top: 25px;
        color:#575757;
        cursor: pointer;
}   
}

@media screen and (max-width:650px){
        .conteudo_topico{
        display: flex;
        flex-direction: column;
        height: auto;
        font-family: "Inter";
        margin: 0;
    }
     .titulo_topico .line{
        border:3px solid #00756A;
        height: 35px;
        width: 0;
        border-radius: 6px;
        margin: 0px;
        margin-top: 5px;
        margin-right: 5px;
    }
    .titulo_topico h1{
        font-weight: 600;
        font-size: 35px;
        margin: 0;
        margin-left: 5px;
    }
    .conteudo_topico{
        margin-top: 30px;
        margin-left: 0px;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        font-family: "Inter";
        padding: 20px;
    }
    .bloco_topico_principal{
        order:1;
        margin-left: 0px;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        margin: 0;
    }
    .bloco_topico_principal .materia_principal{
        order:1;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        margin-top: 20px;
        padding-bottom:20px;
        border-bottom: 2px solid #C0C0C0;
    }
    .bloco_topico_principal .materia_principal img{
        order:1;
        width: 100%;
        height: auto;
        border-radius: 22px;
        margin: 0;
        margin-right: 10px; /* Pequeno espaço entre imagem e texto */
        cursor: pointer;
        object-fit: cover;
        flex-shrink: 0;
    }
    .texto_bloco_topico{
        order: 2;
        display: flex;
        flex-direction: column;
    }
    .bloco_topico_principal .materia_principal h4{
        font-size: 20px;
        margin-left: 10px;
        margin-top: 10px;

    }
    .bloco_topico_principal .materia_principal a{
        font-size: 16px;
        margin-left: 10px;
        margin-top: 10px;
    }

    .bloco_topico_principal .line_bottom{
        display: none;
    }
   
    .bloco_topico_principal .materia_secundaria{
        order:2;
        display: flex;
        flex-direction: row;
        width: 100%;
        height: auto;
        border-bottom:2px solid #C0C0C0;
        padding-bottom: 10px;
        margin-top: 10px;
    }
    .bloco_topico_principal .materia_secundaria img{
        width: 250px;
        height: 160px;
        border-radius: 22px;
        margin: 0;
        margin-right: 10px; /* Pequeno espaço entre imagem e texto */
        cursor: pointer;
        object-fit: cover;
        flex-shrink: 0;
    }
    .bloco_topico_principal .materia_secundaria h4{
        font-weight: 600;
        font-size: 16px;
        margin: 0;
        padding: 10px;
        cursor: pointer;
    }
    .bloco_topico_principal .materia_secundaria a{
        font-size: 12px;
        color: #575757;
        margin:0;
        margin-top: 20px;
        margin-left: 10px;
        cursor: pointer;
    }

.conteudo_materia {
    order: 3;
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    width: 100%;
    height: auto;
    min-height: 200px;
    padding: 10px;
    border: none;
    border-bottom: 2px solid #C0C0C0;
}
.conteudo_materia .bloco_materia{
    display: flex;
    padding: 10px;
    width: 100%;
    height: 95%;
    margin:0;
    flex-direction: row;
    text-align: start;
    color: black;
    text-decoration: none;
    border-bottom: 1px solid #C0C0C0;
}
    .conteudo_materia .bloco_materia img{
        width: 180px;
        height: 120px;
        border-radius: 22px;
        margin: 0;
        margin-right: 10px; /* Pequeno espaço entre imagem e texto */
        cursor: pointer;
        object-fit: cover;
        flex-shrink: 0;
    }
    .texto_bloco_materia {
    padding-left: 0;
    margin-left: 0;
    }
    .bloco_materia .texto_bloco_materia h4{
        font-family: "Inter";
        text-align: start;
        font-size: 16px;
        margin: 0;
        cursor: pointer;
    }
 .bloco_materia .texto_bloco_materia  a{
        font-family: "Inter";
        text-align: start;
        font-size: 10px;
        margin: 0;
        margin-top: 25px;
        color:#575757;
        cursor: pointer;
}   
}