body {
      font-family: Arial, sans-serif;
    }

    .tabs {
      display: flex;
      margin-bottom: 10px;
    }

    .tab-button {
      padding: 10px 20px;
      cursor: pointer;
      background: #e0e0e0;
      border: 1px solid #ccc;
      margin-right: 5px;
      transition: background 0.3s;
    }

    .tab-button.active {
      background: #0a183d;
      color: #fff;
      justify-content: center;

    }

    .tab-content {
      display: none;
      padding: 15px;
      border: 1px solid #ccc;
    }

    .tab-content.active {
      display: block;
    }

    .video-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
    }

    .video-item {
      flex: 0 1 calc(25% - 20px);
      /* 4 por fila con espacio */
      box-sizing: border-box;
      text-align: center;
    }

    .video-item iframe {
      width: 100%;
      height: 500px;
    }

    @media (max-width: 992px) {
      .video-item {
        flex: 0 1 calc(50% - 20px);
        /* 2 por fila en tablets */
      }
    }

    @media (max-width: 576px) {
      .video-item {
        flex: 0 1 100%;
        /* 1 por fila en celulares */
      }
    }