body {
      margin: 0;
    }

    .referencie-body {
      margin: 0;
      padding: 2rem;
      background-color: #f8f8f8;
      font-family: 'Montserrat', 'Open Sans', Arial, Tahoma, sans-serif;
      color: #333;
    }

    .referencie-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-auto-rows: auto;
      gap: clamp(6px, 2vw, 20px);
      justify-content: center;
      align-items: start;
      max-width: 1200px;
      margin: 0 auto;
    }

    .referencie-item-wrap {
      cursor: pointer;
    }

    .referencie-item {
      width: 100%;
      aspect-ratio: 250 / 136;
      position: relative;
      overflow: hidden;
      border: 2px solid #ccc;
      background-color: white;
    }

    .referencie-image {
      position: absolute;
      bottom: 0;
      width: 100%;
      transition: transform 0.5s ease; /* tu sa bude posuvat o vysku prvku transform: translateY(-100%); */
    }

    .referencie-overlay {
      position: absolute;
      bottom: -100%; /* posun (dolu) o -100% vysky rodica. Aj animacia bude preto typu "bottom" (transition: bottom 0.5s ease;) */
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #000;
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      font-weight: 500;
      text-align: center;
      transition: bottom 0.25s ease;
      z-index: 2;
      padding: 0 10px;
      box-sizing: border-box;
    }
    
    .referencie-overlay p {
      margin: 2px 0;
    }

    .referencie-company-item {
      width: 100%;
      height: 40px;
      position: relative;
      overflow: hidden;
    }

    .referencie-company {
      position: absolute;
      bottom: -200%;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #f5f5f5;
      color: #000;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      transition: bottom 0.5s ease;
      z-index: 1;
    }

    .referencie-item-wrap:hover .referencie-image {
      transform: translateY(-100%); /* posun o vysku image. Treba davat pozor, aby image pokryval celeho rodica, inak celkom nezmizne */
    }

    .referencie-item-wrap:hover .referencie-overlay {
      bottom: 0;
    }

    .referencie-item-wrap:hover .referencie-company {
      bottom: 0;
    }

    /* Responsive: zníž počet stĺpcov zo 4 na 2 */
      @media (max-width: 768px) {
      h1.referencie-popis {
        font-size: 1.6rem;
      }
      p.referencie-popis {
        font-size: 0.8rem;
      }
      .referencie-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: clamp(4px, 1.5vw, 12px);
      }
      .referencie-company {
         font-size: 0.7rem;
      }
    }