.body-frame3-eligecurso {
      font-family: sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0;
      padding: 1rem;
      background-color: #f9f9f9;
      box-sizing: border-box;
    }

    .gallery-container {
      width: 100%;
      max-width: 800px;
    }

    .main-image {
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9;
      object-fit: cover;
      border-radius: 10px;
      transition: opacity 0.5s;
      touch-action: pan-y;
    }

    .thumbnails {
      display: flex;
      justify-content: center;
      margin-top: 1rem;
      gap: 10px;
      flex-wrap: wrap;
    }

    .thumbnail {
      width: 60px;
      height: 60px;
      object-fit: cover;
      cursor: pointer;
      border-radius: 5px;
      border: 2px solid transparent;
      transition: border 0.3s;
    }

    .thumbnail.active {
      border-color: #333;
    }

    .dots {
      display: flex;
      justify-content: center;
      margin-top: 10px;
      gap: 6px;
    }

    .dot {
      width: 10px;
      height: 10px;
      background-color: #bbb;
      border-radius: 50%;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .dot.active {
      background-color: #333;
    }

    @media (max-width: 480px) {
      .thumbnail {
        width: 40px;
        height: 40px;
      }

      .dot {
        width: 8px;
        height: 8px;
      }
    }