@media only screen and (max-width: 991px) {
  html {
    font-size: 56.25%;
  }

  .about {
    padding: 6rem 2rem;
  }

  .about-image {
    float: none;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 3rem;
  }

  /* ------- Lightbox ------ */
  .lightbox-prev,
  .lightbox-next {
    padding: 14px;
    font-size: 22px;
  }

  .masonry-gallery {
    margin-bottom: 3rem;
  }

  .lightbox-img {
    max-width: 92vw;
    max-height: 78vh;
  }

  .lightbox-caption {
    font-size: 17px;
    margin-top: 12px;
  }
}

/* --------------------- max-width 767px ----------------------- */
@media only screen and (max-width: 767px) {
  :root {
    --headingFontSize1: 3rem;
    /* 24px umjesto 28.8px */
    --headingFontSize2: 2.5rem;
    /* 20px umjesto 24px */
    --headingFontSize3: 1.8rem;
    /* 14.4px */
    --headingFontSize4: 1.6rem;
    /* 12.8px */
  }

  html {
    font-size: 50%;
  }

  /* ------- Navigation Bar ---- */
  nav i.fas {
    display: block;
  }

  .menu-text {
    display: block;
  }

  nav ul {
    height: calc(100vh - 57.4px);
    width: 100%;
    position: fixed;
    top: 57.4px;
    left: -100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--baseShade1);
    transition: 1s;
    z-index: 999;
    padding-bottom: 9rem;
  }

  nav ul.active li a,
  nav ul li a {
    font-size: 2.5rem;
    padding: 3rem 6rem;
    font-weight: 400;
    color: var(--whiteShade1);
    transition: color 0.3s ease, font-size 0.3s ease;
    text-transform: uppercase;
  }

  nav ul li a:before,
  nav ul li a:hover:before {
    content: none;
    display: none;
  }

  /* ------- Lightbox -------- */
  .lightbox-prev,
  .lightbox-next {
    padding: 12px;
    font-size: 20px;
  }

  .lightbox-img {
    max-width: 94vw;
    max-height: 72vh;
  }

  .lightbox-caption {
    font-size: 16px;
    margin-top: 10px;
  }

  .lightbox-counter {
    font-size: 13px;
  }

  .gallery-entrance a {
    margin: 0 3rem;
  }
}

/* ----------------- max-width 575px ---------------- */
@media only screen and (max-width: 575px) {
  nav ul {
    height: calc(100vh - 52.13px);
    top: 52.13px;
  }

  /* --------- Footer --------- */
  footer {
    padding: 0 4rem;
  }

  footer h3 {
    font-size: 2.2rem;
  }

  .kontakt-mail a {
    font-size: 1.8rem;
  }

  /*--- Scroll To Top Buttons --*/
  #scroll-top-btn {
    height: 5rem;
    width: 5rem;
    right: 3rem;
    bottom: 3rem;
  }

  /*--------- Lightbox ---------*/
  .lightbox-prev,
  .lightbox-next {
    padding: 10px;
    font-size: 18px;
    margin: 0 15px;
  }

  .lightbox-img {
    max-width: 96vw;
    max-height: 65vh;
  }

  .lightbox-caption {
    font-size: 15px;
    margin-top: 8px;
  }

  .lightbox-counter {
    font-size: 12px;
  }

  .lightbox-close {
    top: 15px;
    right: 15px;
    font-size: 26px;
  }
}