.video-cim{
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

body{
  background-color: #0f0f0f;
}

.video-szekcio {
  background-color: #0f0f0f;
  padding: 3rem 1rem;
  /* max-width: 900px; */
  /* margin: 3rem auto; */
  
  border-radius: 0; /* Ha az egész szakasz legyen teljes szélességű, az íves sarkokat el lehet hagyni */
  
  color: rgb(159, 126, 70);
  width: 100vw;       /* teljes viewport szélesség */
  box-sizing: border-box; /* hogy a paddingot beleszámolja a szélességbe */
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  max-width: 1200px;   /* ez a tartalom max szélessége, hogy ne nyúljon nagyon szélesre */
  margin: 0 auto;      /* középre igazítjuk a gridet */
  padding: 0 1rem;     /* belső margó a griden belül */
}

.video-grid > .video-wrapper:nth-child(n+5) {
  grid-column: span 2;
}

.video-wrapper {
  border: 2px solid rgb(159, 126, 70);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(159, 126, 70, 0.4);
}

.video-wrapper iframe {
  width: 100%;
  height: 200px;
  display: block;
  border: none;
  border-radius: 10px;
}

@media (max-width: 768px) {
  .video-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
    padding: 0 1rem;
  }

  .video-grid > .video-wrapper:nth-child(n+5) {
    grid-column: auto;
  }

  .video-wrapper iframe {
    height: 180px;
  }
}

@media (max-width: 480px) {
  .video-grid {
    grid-template-columns: 1fr;
    padding: 0 1rem;
  }

  .video-wrapper iframe {
    height: 160px;
  }
}