#main {
  min-height: 100vh;
  min-height: 100svh;
  padding-bottom: 5vh;
  padding-top: clamp(1rem, 4rem, 8vw);
  gap: 2vh;
  overflow: hidden;
}

#mainText {
  margin-top: 18vh;
  font-size: clamp(1.35em, 2.5vw, 5em);
}

#content {
  display: flex;
  flex-direction: column;
  gap: 4em;
  margin-bottom: 8em;
  z-index: 1;
}

#content .d-flex {
  gap: 3%;
}

#content .button {
  display: block;
  width: clamp(10vw, 30rem, 23vw);
  position: relative;
}

#content .d-flex .mb-5 {
  margin-bottom: 4em !important;
}

#content .obrazek {
  background: url(img/lakovani.webp);
  background-size: cover;
  min-height: 35vh;
  background-position: 30%;
}

#content .obrazek2 {
  background: url(img/cisteniInterieru.jpg);
  background-size: cover;
  min-height: 35vh;
  background-position: 60%;
}

#content .obrazek3 {
  background: url(img/detailing.webp);
  background-size: cover;
  min-height: 35vh;
  background-position: 75%;
}

@media (max-width: 767px) {
  #content {
    margin-bottom: 7vh;
  }

  #content .obrazek,
  .obrazek2,
  .obrazek3 {
    height: 30vh;
    min-width: 70%;
    position: relative;
    top: -7vh;
  }

  #content .button {
    margin-top: 3%;
    width: 50%;
    top: 38vh !important;
  }

  .buttons a {
    width: 60vw;
  }

  #content .button {
    top: 0;
  }

  #mainText {
    margin-top: 14vh;
  }
}

@media (max-width: 576px) {
  #content img {
    max-width: 80vw;
    position: relative;
    top: -1rem;
  }
  #content {
    gap: 2rem;
    margin-bottom: 3em;
  }

  #navigation {
    background-color: transparent !important;
    backdrop-filter: blur(0) !important;
  }
}

@media (max-height:800px) and (max-width: 767px) {
  #content .button {
    top: 42vh !important;
  }

  #content .obrazek,
  .obrazek2,
  .obrazek3 {
    margin-bottom: 7vh;
  }
}

@media (max-height:550px) and (max-width: 767px) {
  #content .button {
    top: 50vh !important;
  }

  #content .obrazek,
  .obrazek2,
  .obrazek3 {
    margin-bottom: 10vh;
  }
}