#sluzba-header-wrapper {
  /*border-bottom: var(--small-line) solid var(--alt-back-color);*/
  max-height: 1080px;
  position: relative;
  width: 100vw;
  width: 100lvw;
}

@media (max-width: 480px) and (orientation: portrait) {
  #sluzba-header-wrapper {
    min-height: 130vw;
  }
}

@media (min-width: 481px) and (max-width: 768px) and (orientation: portrait) {
  #sluzba-header-wrapper {
    min-height: 100vw;
  }
}

@media (max-width: 768px) and (orientation: portrait) {
  #sluzba-header-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
#sluzba-header-wrapper > img,
.sluzba-blocks-bg-img {
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  opacity: 0.2;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}

#sluzba-header-wrapper > img {
  -webkit-mask-image: -webkit-linear-gradient(to top, transparent, black 5%, black 95%, transparent);
  mask-image: -webkit-linear-gradient(to top, transparent, black 5%, black 95%, transparent);
  mask-image: linear-gradient(to top, transparent, black 5%, black 95%, transparent);
}

#sluzba-header-content {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  gap: var(--large-size);
  margin: 0 auto;
  max-width: calc(var(--max-width) + (2 * var(--larger-size)));
  padding: var(--larger-size);
  position: relative;
  width: 100%;
  z-index: 1;
}

#sluzba-header-content img {
  max-height: var(--smaller-distance);
}

#sluzba-header-odrazky {
  color: var(--alt-back-color);
  font-weight: bold;
  line-height: 1.5;
}

#sluzba-header-odrazky li {
  display: -webkit-grid;
  display: -ms-grid;
  display: grid;
  gap: var(--smaller-size);
  -webkit-grid-template-columns: var(--medium-size) 1fr;
  -ms-grid-template-columns: var(--medium-size) 1fr;
  grid-template-columns: var(--medium-size) 1fr;
  padding-top: var(--mini-size);
  padding-bottom: var(--mini-size);
}

#sluzba-header-odrazky li::before {
  background: var(--alt-back-color);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  content: "";
  display: block;
  height: var(--medium-size);
  -webkit-mask-image: url('/svg/check-circle.svg');
  mask-image: url('/svg/check-circle.svg');
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% auto;
  mask-size: 100% auto;
  width: 100%;
}

.blocks-bg-pos-bottom {
  object-position: bottom;
}

.blocks-bg-pos-top {
  object-position: top;
}

.sluzba-blocks ul {
  line-height: 1.5;
  padding: 0 var(--smaller-size);
}

.sluzba-blocks li {
  display: -webkit-grid;
  display: -ms-grid;
  display: grid;
  gap: var(--mini-size);
  -webkit-grid-template-columns: var(--small-size) 1fr;
  -ms-grid-template-columns: var(--small-size) 1fr;
  grid-template-columns: var(--small-size) 1fr;
  padding-top: var(--micro-size);
  padding-bottom: var(--micro-size);
}

.sluzba-blocks li::before {
  background: var(--main-front-color);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  content: "";
  display: block;
  height: var(--small-size);
  -webkit-mask-image: url('/svg/check-circle.svg');
  mask-image: url('/svg/check-circle.svg');
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% auto;
  mask-size: 100% auto;
  transform: translateY(var(--micro-size));
  width: 100%;
}

.sluzba-blocks-sekce {
  position: relative;
}

.sluzba-blocks-sekce h3 {
  color: var(--alt-back-color);
  padding-top: var(--medium-size);
  padding-bottom: var(--small-size);
}

.sluzba-blocks-bg-img {
  -webkit-mask-image:
    -webkit-linear-gradient(to top, transparent 0%, black 10%, black 90%, transparent 100%),
    -webkit-linear-gradient(to left, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image:
    -webkit-linear-gradient(to top, transparent 0%, black 10%, black 90%, transparent 100%),
    -webkit-linear-gradient(to left, transparent 0%, black 10%, black 90%, transparent 100%);
  mask-image:
    linear-gradient(to top, transparent 0%, black 10%, black 90%, transparent 100%),
    linear-gradient(to left, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-composite: intersect;
  mask-composite: intersect;
}

.sluzba-blocks-imgs {
  align-items: center;
  display: grid;
  gap: var(--small-size);
  grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
  justify-items: center;
  padding-top: var(--small-size);
  padding-bottom: var(--medium-size);
  width: 100%;
}

.sluzba-blocks-img-wrapper {
  border: var(--medium-line) solid var(--alt-back-color);
  border-radius: var(--small-size);
  display: flex;
  height: 100%;
  justify-content: center;
  overflow: hidden;
  width: 100%;
}

.sluzba-blocks-img {
  display: block;
  height: auto;
  object-fit: contain;
  object-position: center;
  width: 100%;
}

.sluzba-blocks-sekce p {
  hyphens: auto;
  line-height: 1.5;
  padding-top: var(--mini-size);
  padding-bottom: var(--mini-size);
  text-align: justify;
}

.sluzba-blocks-sekce :not(.sluzba-blocks-bg-img) {
  position: relative;
  z-index: 1;
}

.sluzba-popis {
  color: var(--main-front-color);
  margin-top: var(--smaller-size);
}

@media (max-width: 768px) {

  #sluzba-header-content {
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }

  #sluzba-header-content h1 {
    margin-top: 0;
  }

  #sluzba-header-nadpisy > img {
    float: right;
    margin-left: var(--small-size);
    margin-bottom: var(--small-size);
  }

}

@media (min-width: 769px) {

  #sluzba-header-content {
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  #sluzba-header-nadpisy h1 {
    margin-top: 0;
  }

  #sluzba-header-nadpisy:has(img) {
    padding-top: var(--larger-size);
    padding-bottom: var(--larger-size);
  }

  #sluzba-header-content img {
    margin-top: calc(-0.5 * var(--smaller-distance));
    margin-bottom: var(--smaller-size);
  }

}

@media (min-width: 1620px) {

  #sluzba-header-wrapper > img {
    -webkit-mask-image: -webkit-linear-gradient(var(--main-back-color), transparent 10%, transparent 90%, var(--main-back-color));
    mask-image: -webkit-linear-gradient(var(--main-back-color), transparent 10%, transparent 90%, var(--main-back-color));
    -webkit-mask-image:
      -webkit-linear-gradient(to left, transparent, black 5%, black 95%, transparent),
      -webkit-linear-gradient(to top, transparent, black 5%, black 95%, transparent);
    mask-image:
      -webkit-linear-gradient(to left, transparent, black 5%, black 95%, transparent),
      -webkit-linear-gradient(to top, transparent, black 5%, black 95%, transparent);
    mask-image:
      linear-gradient(to left, transparent, black 5%, black 95%, transparent),
      linear-gradient(to top, transparent, black 5%, black 95%, transparent);
    -webkit-mask-composite: intersect;
    mask-composite: intersect;
    width: 1620px;
  }

}