.uvod-hero {
      position: relative; /* veľmi dôležité kvoli videu, lebo bez "position: relative nefunguje z-index */
      box-sizing: border-box;
      height: calc(100vh - var(--menu-height)); /* zaberie celý viewport okrem výšky menu */
      margin-top: var(--menu-height); /* aby nezačínala pod menu */
      overflow: hidden; /* aby video neprečnievalo */
      background-image: url('media/CinankaDlheVlasyZozadu_2display-CAD.jpg'); /* toto sa v roznych uvodnych obrazovkach v html prepise */
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: left;
      color: white;
    }

    .uvod-hero-content {
      text-align: left;
      margin-left: 40px;
      z-index: 1; /* musí byť nad videom */}
    
    .uvod-hero h1 {
      font-size: 4rem;
      line-height: 1.6;
      padding: 20px;
      border-radius: 10px;
      background-color: transparent;
      margin-bottom: 20px;
      margin-left: 40px;
    }

    .uvod-hero p {
      font-size: 2rem;
      line-height: 1.6;
      padding: 1rem;
      background-color: transparent;
      margin-bottom: 20px;
      margin-left: 40px;
    }

   .uvod-hero-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; /* rovnaké ako výška .uvod-hero */
      object-fit: cover; /* ako background-size: cover */
      z-index: 0; /* pošle video za obsah, ktory ma z-index: 1; */
    }
      @media (max-width: 768px) {
      .uvod-hero h1 { 
        font-size: 2rem;
        line-height: 1.1;
      }
      .uvod-hero p {
        font-size: 1.5rem;
        line-height: 1.1;
        padding: 0.5rem;
      }
    }