.fade-enter-active, .fade-leave-active {
      transition: opacity var(--fade);
  }
  .fade-enter, .fade-leave-to{
      opacity: 0;
  }
  #niveis-de-ensino{
    display: grid;
    gap: 56px;
  }
  
  /* FILTRO ---------------------------------------------------------------- */
  .ct-filtro{
    max-width: 800px;
    margin: auto;
    display: grid;
    gap: 40px;
  }
  .ct-filtro h2{
    text-align: center;
    font-size: 1.875rem;
    line-height: 2.8rem;
    color:var(--green-600) ;
  }
  .filter-list-wrapper{
    max-width: 100%;
  }
  .filter-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem .5rem;
  }
  .filtro-bt{
     box-shadow:var(--shadow-default);
     border-radius:200px;
     background-color: white;
     padding: .5rem 1.5rem;
     border: solid 2px white;
     transition: border .2s;
     font-size: .875rem;
     font-weight: 600;
     color:black
  }
  .filtro-bt.active, .filtro-bt:hover{
    border: solid 2px var(--green-600);
  }
  
  
  
  /* INFO ------------------------------------------------------------- */
  .ct-nivel-info{
    background-color:var(--green-100);
    padding: 40px 0 80px 0;
    position: relative;
    overflow: hidden;
  }
  .ct-nivel-info > div {
    display: grid;
    grid-template-columns: 38px minmax(auto, 800px) 38px;
    align-items: center;
    justify-content: space-between;
    gap:40px;
  }
  .nivel-info{
    display: grid;
    grid-template-columns: 1fr;
  }
  .info-ct{
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 40px;
    align-items: center;
  }
  .info-ct-img{
    width: 200px;
    height: 200px;
    overflow: hidden;
    border-radius: 30px;
    display: grid;
    place-content: center;
  }
  .info-header{
    display: grid;
    place-content: center;
    grid-column: 1/2;
    grid-row: 1/2;    
  }
  .info-header h4{
    display: none;
  }
  .nivel-info-bts{
    background-color: var(--green-600);
    border-radius: 5px;
    display: grid;
    place-content: center;
    width: 38px;
    aspect-ratio: 1/1;
    transition: background .3s;
  }
  .nivel-info-bts:hover{
    background-color: var(--green-800);
  }
  .nivel-info h4{
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--green-600);
    line-height: 2.2rem;
  }
  .ct-info-txt{
    display: grid;
    gap: .5rem;

  }
  .info-txt a{
    text-decoration: underline;
    color: var(--green-600);
  }
  .info-folha{
    position:absolute;
  }
  .info-forma{
    position:absolute;
    right: 0;
    bottom:0;
  }

  .txt-nivel-wrapper{
    overflow: hidden;
    transition: height .5s;
    grid-column: 2/3;
    grid-row:1/2;
  }


  /* MEDIAS */
  @media (max-width: 1024px){
    .ct-nivel-info{
      padding-bottom: 100px;
    }
  }

  @media (max-width: 768px){
    #niveis-de-ensino{
      gap: 0;
    }
    .ct-nivel-info{
      padding-bottom: 0px;
      display: flex;
      flex-direction: column-reverse;
    }
    .ct-nivel-info .pg-container{
      gap: 24px;
    }
    .ct-filtro{
      padding-inline: 0!important;
    }
    .info-ct{
      gap: 40px 0px;
    }
    .info-header{
      grid-column: 1/3;
      grid-template-columns: max-content 1fr;
      gap: 24px;
      align-items: center;
    }
    .info-header h4{
      display: inline-block;
    }
    .info-ct-img{
      width: 80px;
      height: 80px;
      border-radius: 10px;
    }
    .info-ct-img img{
      height: 80px;
    }
    .txt-nivel-wrapper{
      grid-row:2/3;
      grid-column: 1/3;
    }
    .ct-info-txt h4{
      display: none;
    }
    .info-folha{
      display: none;
    }
    .info-forma{
      position: relative;
      width: 100%;
      bottom: -20px;
    }
    .filter-list-wrapper{
      max-width: 100vw;
      overflow-x: scroll;
      padding-block: 2em;
    }
    .filter-list{
      width: max-content;
      padding-right: 40px;
    }
  }