@import url(main.css);
/*----------------------------*/
#artigos {
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--bg-azul-medio-meio);
}
/*----------------------------*/
.cards {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 16px;
   width: 80rem;
}
/*----------------------------*/
.card {
   position: relative;
   overflow: hidden;
   border-radius: 2rem;
   box-shadow: var(--sombra-card);
}
/*--------------------*/
.card img {
   height: 100%;
   max-width: 100%;
   border-radius: 2rem;
}
/*--------------------*/
.card figcaption {
   position: absolute;
   bottom: 0;
   padding: 1rem 1.5rem 1.5rem;
}
/*--------------------*/
.card h3 {
   font-size: 1.2rem;
   font-weight: 600;
   line-height: 1.5;
   color: var(--branco);
}
/*--------------------*/
.cards .btn {
   margin-top: 0;
}
/*--------------------*/
.card::before {
   content: '';
   position: absolute;
   inset: 0;
   top: 50%;
   background: linear-gradient(180deg, transparent 0%, #020617);
}
/*--------------------------------------------------------------------------------*/
                           /* PÁGINA DOS ARTIGOS */ 
/*--------------------------------------------------------------------------------*/
.artigo {
   background-color: #fff;
}
/*--------------------*/
.artigo h1 {
   color: #000;
   text-shadow: none;
}
/*--------------------*/
.artigo h2 {
   font-size: 1.2rem;
   font-weight: 500;
   margin-block: 0.5rem;
   text-shadow: none;
   text-align: center;
}
/*--------------------*/
.artigo p {
   color: #000;
   text-shadow: none;
}
/*--------------------------------------------------------------------------------*/
                                 /* FORMULAS */ 
/*--------------------------------------------------------------------------------*/
.formulas p {
   font-size: 1.4rem;
   margin-block: 0.3rem;
   text-indent: 0;
}
/*--------------------*/
.formulas .math-p p {
   font-size: 1.2rem;
   margin-block: 0;
   text-indent: 0;
}
/*----------------------------*/ 
.math {
   margin-top: 2rem;
}
/*----------------------------*/ 
math {
   display: flex;
   justify-content: center;
   font-size: 1.4rem;
   font-weight: 500;
   margin-block: 1rem;
   text-shadow: none;
}
/*----------------------------*/ 
.math-p {
   display: flex; 
   align-items: center;
   justify-content: left;
}
/*--------------------------------------------------------------------------------*/
                                    /* CONFIG. */ 
/*--------------------------------------------------------------------------------*/
.ruv {
   font-size: 1.5rem;
}
/*----------------------------*/ 
.juntas {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 10px;
}
/*--------------------*/
.juntas img {
   box-shadow: var(--sombra-card);
}
/*--------------------*/
.juntas h2 {
   margin-top: 2rem;
}
/*--------------------------------------------------------------------------------*/
                                       /* VIDEO */ 
/*--------------------------------------------------------------------------------*/
.mp4 {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 10px;
}
/*--------------------*/
.mp4 video {
    width: 100%;
    height: 200px;
}
/*--------------------*/
.mp4 :nth-child(3) {
    grid-column: span 2;
    grid-row: span 1;
}


/*--------------------------------------------------------------------------------*/
                                /* CONFIG. MOBILE */ 
/*--------------------------------------------------------------------------------*/
                        @media screen and (max-width:1531px){
/*--------------------------------------------------------------------------------*/
   .cards {
      width: 70rem;
   }
}
/*--------------------------------------------------------------------------------*/
                           @media screen and (max-width: 800px){                     
/*--------------------------------------------------------------------------------*/
   .mp4 {
      display: block;
   }
}
/*--------------------------------------------------------------------------------*/
                           @media screen and (max-width: 660px){                     
/*--------------------------------------------------------------------------------*/
   .cards {
      grid-template-columns: 1fr 1fr;
   }
/*----------------------------*/
   .card img {
      width: 100%;
   }
}
/*--------------------------------------------------------------------------------*/
                           @media screen and (max-width: 450px){                     
/*--------------------------------------------------------------------------------*/
   .cards {
      grid-template-columns: 1fr;
   }
/*----------------------------*/
   .card img {
      height: 35rem;
   }
}