/* Estilos para telas menores */
@media (max-width: 1024px) {
    header {
      height: 25vh;
      padding: 5px;
    }
  
    .flex-box {
      flex-direction: column;
      align-items: center;
    }
  
    .flex-box > .videos {
      flex: 1 1 80%;
      max-width: 80%;
    }
  }
  
  @media (max-width: 768px) {
    header {
      height: 20vh;
      text-align: center;
      flex-direction: column;
    }
  
    nav {
      padding: 0;
      margin-bottom: 5%;
    }
  
    ul {
      flex-direction: column;
      align-items: center;
    }
  
    .flex-box > .videos {
      flex: 1 1 100%;
      max-width: 90%;
    }
  
    .youtube-promo h1 {
      font-size: 1.5rem;
    }
  
    .youtube-promo p {
      font-size: 1rem;
    }
  
    .promo-btn {
      font-size: 1.1rem;
      padding: 12px 24px;
    }
  }
  
  @media (max-width: 480px) {
    header {
      height: 15vh;
    }
  
    .titulo-video {
      font-size: 1rem;
    }
  
    .descricao {
      font-size: 0.85rem;
    }
  
    .filter-section {
      flex-direction: column;
      gap: 10px;
    }
  
    .filter-btn {
      font-size: 1rem;
      padding: 8px 15px;
    }
  
    .youtube-promo {
      padding: 20px 10px;
    }
  
    .promo-btn {
      font-size: 1rem;
      padding: 10px 20px;
    }
  }