.bloky {
  display:flex;
  flex-direction: column;
  gap:100px;
}

.bloky h2, .bloky h3 {
  all: unset;
}

.bloky h2 {
    color: var(--main-font-color_vyrazna);
}

.bloky .blok {
  scroll-margin-top: 100px;
}


.blok, .blok_prepinaci {
  display:flex;
  gap:calc(30px * var(--scale));
}

.blok .podblok {
  display:flex;
  gap:calc(25px * var(--scale));
  flex-direction: column;
}

.blok .podblok .nadpisycont {
  display:flex;
  gap:calc(21px * var(--scale));
  flex-direction: column;
}


.blok .podblok:empty {
  display:none;
}

.blok:last-of-type {
  margin-bottom:calc(100px * var(--scale));;
}


.bloky .blok .nadpis {
  font-size: clamp(2rem, 1rem + 2vw, 2.9rem);
  line-height: 1.2;
  font-weight:250;
  margin-bottom:0px;
}

.bloky .blok .podnadpis {
  font-size: clamp(1rem, 0.5rem + 1.4vw, 1.25rem);
  line-height: 1.3;
  font-weight:500;
}

.bloky .blok .text {
  font-weight:300;
  line-height:var(--font_lineheight);
}

.bloky .blok .nadpis,
.bloky .blok .podnadpis
.bloky .blok .text,
.bloky .blok .podblok {
  text-align: center;
}

.blok .text p {
  margin-top:0px;
  margin-bottom:calc(15px * var(--scale));;
}

.blok .text p:last-of-type {
  margin-bottom:0px;
}


.podblok .button {
  margin-top:18px;
}


.bloky .menu_kotvy {
  text-align: center;
  font-size:clamp(1rem, 0.5rem + 1.4vw, 1.3rem);
  line-height: 1.4;
}

.bloky .menu_kotvy a {
  white-space: nowrap;
}

/*************************************
clanek
*************************************/

.blok.clanek, .blok_prepinaci {
  gap:calc(50px * var(--scale));
  align-items: center;
  justify-content: center;
}

.blok.clanek.leva, .blok_prepinaci.leva {
  flex-direction: row-reverse;
}

.blok.clanek .podblok, .blok_prepinaci .podblok {
  /* min-width: calc(50% - 50px); */
}

.blok.clanek.prava .podblok, .blok_prepinaci.prava .podblok  {
  text-align: right;
}

.bloky .blok.leva .nadpis,
.bloky .blok.leva .podnadpis,
.bloky .blok.leva .text,
.blok.clanek.leva .podblok,
.blok_prepinaci.leva .nadpis,
.blok_prepinaci.leva .podnadpis,
.blok_prepinaci.leva .text,
.blok_prepinaci.leva .podblok {
  text-align: left;
}

.bloky .blok.prava .nadpis,
.bloky .blok.prava .podnadpis,
.bloky .blok.prava .text,
.blok.clanek.prava .podblok,
.blok_prepinaci.prava .nadpis,
.blok_prepinaci.prava .podnadpis,
.blok_prepinaci.prava .text,
.blok_prepinaci.prava .podblok {
  text-align: right;
}

.blok .podblok .text ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.blok .podblok .text ul li {
  position: relative;
  padding-left: 0;
  margin-bottom: 15px;
  line-height: 20px;
}

.blok .podblok .text ul li::before  {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background: url('/zdroje/trojuh_univerzal_ostry3.svg') no-repeat center center;
  background-size: contain;
  margin-right: 7px;
  margin-top: -2px;
  vertical-align: middle;
}

/*************************************
fotky u článku a přepínacích článků
*************************************/
.blok.clanek .files_cont, .blok_prepinaci .files_cont  {
  --blok_files_w: 604px;
  --blok_files_h: 550px;
  position: relative;
  width: var(--blok_files_w);
  height: var(--blok_files_h);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  overflow: hidden;
}

.blok.clanek .files_cont > svg, .blok_prepinaci .files_cont > svg { /*podkladové svg*/
  position: absolute;
  inset: 0;
  top:11px;
  width: 100%;
  height: 100%;
  z-index: 0;
  fill: none;
  stroke: #454545;
  stroke-width: 2.2;
  pointer-events: none;
  transform: rotate(180deg);
  transform-origin: center;
}


.blok.clanek .files_cont .lister, .blok_prepinaci .files_cont .lister{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  z-index: 1;
}

.blok.clanek .files_cont .lister .list, .blok_prepinaci .files_cont .lister .list {
  position: relative;
  width: 20px;
  height: 22px;
  display: flex;
  justify-content: center;
  z-index: 1;
  overflow: hidden;
  cursor:pointer;
  margin:43px 18px 0px 18px;
}

.blok.clanek .files_cont .lister .file, .blok_prepinaci .files_cont .lister .file {
  z-index: 1;
  border-radius: 20px;
}

.blok.clanek .files_cont .lister .file img, .blok_prepinaci .files_cont .lister .file img {
  width: 470px;
  height: 470px;
  object-fit: cover;
  border-radius: 18px;
  display:inline-block;
}

.blok.clanek .files_cont .number, .blok_prepinaci .files_cont .number {
  display:flex;
  flex-direction: column;
  gap:3px;
  margin-top:10px
}

.blok.clanek .files_cont .number span, .blok_prepinaci .files_cont .number span {
  text-align: center;
}


.blok.clanek .files_cont .number span:first-of-type, .blok_prepinaci .files_cont .number span:first-of-type {
  font-weight:300;
  font-size:24px;
}

.blok.clanek .files_cont .number span:last-of-type, .blok_prepinaci .files_cont .number span:last-of-type {
  font-weight:500;
  font-size:13px;
  color: var(seda_str_sv);
}


.blok.clanek .files_cont .files, .blok_prepinaci .files_cont .files{
  position: relative;       /* aby šlo .file absolutně vystředit */
  width: 470px;
  height: 470px;
  overflow: hidden;         /* schovat zbytek obrázků */
}

.blok.clanek .files_cont .file, .blok_prepinaci .files_cont .file {
  position:absolute;
  inset:0;
  /* výchozí stav – neviditelný a nekliknutelný */
  opacity:0;
  pointer-events:none;
  transform:scale(.94);
  transition:opacity .45s ease, transform .45s ease;
  /* aby aktivní snímek ležel navrchu při překryvu */
  z-index:0;
}

/* (2) – právě zobrazený obrázek */
.blok.clanek .files_cont .file.active, .blok_prepinaci .files_cont .file.active {
  opacity:1;
  pointer-events:auto;
  transform:scale(1);
  z-index:1;
}



/*************************************
přepínací
*************************************/

/* .blok.prepinaci {
  position:relative;
  border: 1px solid var(--seda_tm);
  border-radius: 24px;
  background: #1C1D1D;
  padding: calc(44px * var(--scale)) calc(51px * var(--scale)) calc(46px * var(--scale)) calc(51px * var(--scale));
} */

.blok.prepinaci  {
  flex-direction:column;
}

.blok_prepinaci .podblok .nadpis {
  font-size:clamp(1.2rem, 0.5rem + 1.4vw, 1.8rem);
  line-height: 1.3;
  font-weight:600;
}

.blok_prepinaci .podblok .podnadpis {
  font-size: clamp(1rem, 0.5rem + 1.4vw, 1.25rem);
  line-height: 1.3;
  font-weight:500;
}

.blok_prepinaci .podblok .text {
  font-weight:300;
  max-width:600px;
}

.blok.prepinaci .prepinace {
  display:flex;
  flex-wrap: wrap;
  justify-content: center;
  gap:0px 30px;
  margin-bottom: calc(30px * var(--scale))
}

.blok.prepinaci .prepinace .prepinac {
  color:red;
}

.blok.prepinaci .prepinace .prepinac.selected {
  background-color: var(--cervena_tm);
  border-color: var(--cervena_tm);
  color: #ffffff;
}



/*************************************
zpráva
*************************************/

.blok.zprava, .blok.formular {
  position:relative;
  border: 1px solid var(--seda_tm);
  border-radius: 24px;
  background: var(--background_over_tm);
  padding: calc(44px * var(--scale)) calc(51px * var(--scale)) calc(46px * var(--scale)) calc(51px * var(--scale));
}

.blok.zprava.s_ikonou {
  margin-top: calc(30px * var(--scale));;
}

.blok.zprava .podblok, .blok.formular .podblok{
  gap:calc(20px * var(--scale));
}

.blok.zprava .nadpis, .blok.formular .nadpis{
  font-size: clamp(1.3rem, 0.5rem + 1.4vw, 1.6rem);
  line-height: 1.3;
  font-weight:600;
  text-align: left;
}

.blok.zprava .podnadpis, .blok.formular .podnadpis {
  font-size:calc(20px * var(--scale));
  font-weight:500;
  text-align: left;
}

.blok.zprava .text, .blok.formular .text {
  font-size:var(--fontsize);
  font-weight:300;
  text-align: left;
}

/*************************************
ikona u zprávy
*************************************/

.blok.zprava .ikona {
  position: absolute;
  top: calc(-65px * var(--scale));;
  right: calc(55px * var(--scale));;
  width: calc(117px * var(--scale));
  height: calc(105px * var(--scale));
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  overflow: hidden;
}

.blok.zprava .ikona svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  fill: var(--background_over_tm);
  stroke: var(--cervena);
  stroke-width: 4.3;
  pointer-events: none;
}

.blok.zprava .ikona i {
  font-size: calc(40px * var(--scale));
  margin-top:20px;
  color: white;
  z-index: 1;
  position: absolute;
}


/*************************************
button u zprávy
*************************************/


.blok.zprava .button {
  position: absolute;
  bottom: calc(-28px * var(--scale));
  right: calc(83px * var(--scale));
  width: calc(58px * var(--scale));
  height: calc(50px * var(--scale));
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  overflow: hidden;
  border:0px;
  padding:0px;
  border-radius: 0px;
}

.blok.zprava .button:hover {
  background-color: inherit;
  border-color: inherit;
  color: inherit;
  transform: scale(120%);
}

.blok.zprava .button:hover svg {
  fill: var(--cervena);
}


.blok.zprava .button svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  fill: var(--cervena_tm);
  stroke: var(--cervena_tm);;
  stroke-width: 4.3;
  pointer-events: none;
  transform: rotate(180deg);
  transform-origin: center;
  transition: fill .25s ease, stroke .25s ease;
}


.blok.zprava .button i {
  font-size: calc(19px * var(--scale));
  margin-top:-10px;
  margin-left:1px;
  color: white;
  z-index: 1;
  position: absolute;
  font-style: normal;
}


/*************************************
produkty
*************************************/


  .blok.produkt {
    gap:80px;
    flex-direction:column;
  }


/*************************************
formulář
*************************************/

  .blok.formular {
    display:flex;
    flex-direction: column;
    gap:40px;
  }

  .blok.formular .fo-text {
    text-align:left;
  }

  .blok.formular.stred .nadpis,
  .blok.formular.stred .podnadpis,
  .blok.formular.stred .textnadpis,
  .blok.formular.stred .input_nadpis,
  .blok.formular.stred .text,
  .blok.formular.stred .fo-text,
  .blok.formular.stred .input_radio_radio,
  .blok.formular.stred .input_text_text,
  .blok.formular.stred .input_text_password,
  .blok.formular.stred .input_text_textarea  {
    text-align:center
  }

  .blok.formular.stred form {
      align-items: center;
  }

  .blok.formular.stred .input_checkbox {
    justify-content: center;
  }

  .blok.formular.prava .nadpis,
  .blok.formular.prava .podnadpis,
  .blok.formular.prava .textnadpis,
  .blok.formular.prava .input_nadpis,
  .blok.formular.prava .text,
  .blok.formular.prava .fo-text,
  .blok.formular.prava .input_radio_radio,
  .blok.formular.prava .input_text_text,
  .blok.formular.prava .input_text_password,
  .blok.formular.prava .input_text_textarea  {
    text-align:right
  }

  .blok.formular.prava form {
      align-items: right;
  }

  .blok.formular.prava .input_checkbox {
    justify-content: right;
  }

  .blok.formular form {
    display:flex;
    flex-direction: column;
    gap:calc(30px * var(--scale));
  }




/*************************************
ikony
*************************************/


.blok.ikony {
  gap:80px;
  flex-direction:column;
}

.blok.ikony .podblok:last-of-type  {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content: center;
  gap:calc(100px * var(--scale)) calc(70px * var(--scale));
}

.blok.ikony .ikona{
  display:flex;
  flex-direction:column;
  width:300px;
  gap:calc(20px * var(--scale));
  text-align: center;
  align-items: center;
  transition: transform .25s ease;
}

.blok.ikony .ikona .ikona_font{
  font-size:calc(77px * var(--scale));
  line-height: 77px;
}

.blok.ikony .ikona .ikona_font, .blok.ikony .ikona .ikona_svg_tmava {
  margin-bottom: calc(30px * var(--scale))
}

.blok.ikony .ikona .nazev{
  font-size:calc(25px * var(--scale));
  font-weight:300;
}


.blok.ikony a {
  color:var(--main-font-color);
  transition: color .05s ease;
}

.blok.ikony a:hover, .blok.ikony a:hover .ikona_svg_tmava {
  color:var(--aktivni);
}

.blok.ikony a:hover .ikona {
  transform: scale(110%);
}

.ikona_svg {
  width: 73px;
  height: 73px;
  display: inline-block;
}

/* světlé pozadí = černé ikony */
.ikona_svg_svetla { color: #111; }

/* tmavé pozadí = bílé ikony (negativ) */
.ikona_svg_tmava  { color: var(--main-font-color_vyrazna); }

/* pro stroke ikony lze globálně doladit tloušťku */
.ikona_svg_stroke { stroke-width: 1.5; }

/*************************************
fotogalerie
*************************************/


.blok.galerie {
  gap:calc(20px * var(--scale));
  flex-direction:column;
}

.blok.galerie .for_blok .cont {
  justify-content: center;
  gap: 0px calc(15px * var(--scale));
}


.blok.galerie .fotgal_cont{
  margin-bottom: 0px;
}

.blok.galerie .fotgal_cont .cont{
  margin-top: 0px;
}


/*************************************
kontakt
*************************************/


.blok.kontakt {
  gap: 80px;
  flex-direction: column;
}

.blok.kontakt .podblok:last-of-type {
  width:100%;
  display:flex;
  align-items: center;
}

.blok .seznam_kontaktu {
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
  gap: calc(80px * var(--scale)) calc(70px * var(--scale));
  justify-content: center;
  align-items: flex-start;
}

.blok .seznam_kontaktu .kontakt{
  display:flex;
  flex-direction:column;
  width:300px;
  gap:calc(20px * var(--scale));
  text-align: center;
  align-items: center;
  transition: transform .25s ease;
}

.blok .seznam_kontaktu .kontakt .content {
  width: 230px;
  height: 230px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  object-fit: cover;
  vertical-align:top;
  text-align:center;
  position:relative;
  transition: transform 0.25s ease;
}

.blok .seznam_kontaktu .kontakt .content.crop{
  border-radius:230px;
  border:var(--border_big) solid var(--border_big_color);
}

.blok .seznam_kontaktu .kontakt .content.no_crop{
  border-radius:var(--border_radius_img_mala);
}

.blok .seznam_kontaktu .kontakt .content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}


.blok .seznam_kontaktu .kontakt .jmeno {
  font-size:clamp(1.2rem, 0.5rem + 1.0vw, 1.6rem);
  font-weight:650;
  white-space: nowrap;
}

.blok .seznam_kontaktu .kontakt .jmeno span{
  font-size:clamp(0.7rem, 0.3rem + 1.0vw, 1rem);
}

.blok .seznam_kontaktu .kontakt .adresa {
  font-size:clamp(0.7rem, 0.3rem + 1.0vw, 0.8rem);
  line-height: 1.4;
  white-space: nowrap;
  font-weight:550;
}

.blok .seznam_kontaktu .kontakt .telefon_a_mail {
  font-size:clamp(0.9rem, 0.3rem + 1.0vw, 1rem);
  line-height: 1.7;
  white-space: nowrap;
  font-weight:400;
}

.blok .seznam_kontaktu .kontakt .telefon_a_mail i{
  font-size:clamp(0.7rem, 0.3rem + 1.0vw, 0.8rem);
}

.blok .seznam_kontaktu .kontakt .text{
  font-size:calc(25px * var(--scale));
  font-weight:300;
}

/*************************************
clanekpozadi
*************************************/

.blok.clanekpozadi {
  position: relative;
  display:flex;
  width: calc( 100% + calc(2 * var(--main1pad) ) );
  min-height: 60vh;
  min-height: 60dvh;
  overflow: hidden;
  margin-left: calc(var(--main1pad) * -1);
  /* padding: 50px var(--main1pad); */
}

.blok.clanekpozadi .pozadi-wrapper {
position: absolute;
inset: 0;
overflow: hidden;
z-index: -1;
}

.blok.clanekpozadi .pozadi-wrapper .kryt {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--kryt);
}

.blok.clanekpozadi #bg1, #bg2 {
opacity: 0;
animation-name: fadeIn;
animation-duration: 1s;
animation-fill-mode: both;
}

.blok.clanekpozadi .pozadi-wrapper .pozadi {
position: absolute;
top: 50%;
left: 50%;
width: auto;
object-fit: cover;
z-index: -1;
}

.blok.clanekpozadi .pozadi-wrapper img {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
object-fit: cover;
transition: opacity 1s ease;
opacity: 0;
}



.blok.clanekpozadi .podblok.ul, .blok.clanekpozadi .podblok.l, .blok.clanekpozadi .podblok.dl, .blok.clanekpozadi .podblok.ur, .blok.clanekpozadi .podblok.r, .blok.clanekpozadi .podblok.dr {
  width:40%;
}

.blok.clanekpozadi .podblok.u, .blok.clanekpozadi .podblok.c, .blok.clanekpozadi .podblok.d {
  width:80%;
}

.blok.clanekpozadi:has(.podblok.ul),
.blok.clanekpozadi:has(.podblok.l),
.blok.clanekpozadi:has(.podblok.dl) {
  justify-content: flex-start;
}


.blok.clanekpozadi:has(.podblok.u),
.blok.clanekpozadi:has(.podblok.c),
.blok.clanekpozadi:has(.podblok.d) {
  justify-content: center;
}

.blok.clanekpozadi:has(.podblok.ur),
.blok.clanekpozadi:has(.podblok.r),
.blok.clanekpozadi:has(.podblok.dr) {
  justify-content: flex-end;
}


.blok.clanekpozadi .podblok.ul, .blok.clanekpozadi .podblok.l, .blok.clanekpozadi .podblok.dl {
  padding: 50px calc(2 * var(--main1pad)) 50px var(--main1pad);
  background: linear-gradient(to right, rgba(0, 0, 0, 0.7), transparent);
}

.blok.clanekpozadi .podblok.ur, .blok.clanekpozadi .podblok.r, .blok.clanekpozadi .podblok.dr {
  padding: 50px var(--main1pad) 50px calc(2 * var(--main1pad));
  background: linear-gradient(to left, rgba(0, 0, 0, 0.7), transparent);
}

.blok.clanekpozadi .podblok.u {
  padding: 50px var(--main1pad);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent);
}

.blok.clanekpozadi .podblok.d {
  padding: 50px var(--main1pad);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.blok.clanekpozadi .podblok.c {
  padding: 50px var(--main1pad);
  background:
    /* horizontální přechod */
    linear-gradient(to right,
      transparent 0%,
      rgba(0, 0, 0, 0.6) 50%,
      transparent 100%),
    /* vertikální přechod */
    linear-gradient(to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.3) 50%,
      transparent 100%);
  background-blend-mode: multiply; /* průnik obou gradientů */
}

.blok.clanekpozadi .podblok.ul, .blok.clanekpozadi .podblok.l, .blok.clanekpozadi .podblok.dl,
.blok.clanekpozadi .podblok.ul .nadpis, .blok.clanekpozadi .podblok.l .nadpis, .blok.clanekpozadi .podblok.dl .nadpis {
  text-align:left;
}

.blok.clanekpozadi .podblok.u, .blok.clanekpozadi .podblok.c, .blok.clanekpozadi .podblok.d,
.blok.clanekpozadi .podblok.u .nadpis, .blok.clanekpozadi .podblok.c .nadpis, .blok.clanekpozadi .podblok.d .nadpis {
  text-align:center;
}

.blok.clanekpozadi .podblok.ur, .blok.clanekpozadi .podblok.r, .blok.clanekpozadi .podblok.dr,
.blok.clanekpozadi .podblok.ur .nadpis, .blok.clanekpozadi .podblok.r .nadpis, .blok.clanekpozadi .podblok.dr .nadpis {
  text-align:right;
}

.blok.clanekpozadi .podblok.ul, .blok.clanekpozadi .podblok.ur, .blok.clanekpozadi .podblok.ur {
  justify-content: flex-start;
}


.blok.clanekpozadi .podblok.l, .blok.clanekpozadi .podblok.c, .blok.clanekpozadi .podblok.r   {
  justify-content: center;
}


.blok.clanekpozadi .podblok.dl, .blok.clanekpozadi .podblok.d, .blok.clanekpozadi .podblok.dr {
  justify-content:flex-end;
}

.blok.clanekpozadi {
  color:#ffff;
}

.blok.clanekpozadi .button {
  border-color: var(--seda_str);
}


/*************************************
responzivita
*************************************/

@media screen and (max-width: 1460px) {


    .blok .files_cont {
      transform:scale(0.8);
      margin:calc(var(--blok_files_w) * -0.1) calc(var(--blok_files_h) * -0.1);
    }

}

@media screen and (max-width: 1250px) {

  .blok .files_cont {
    transform:scale(0.7);
    margin:calc(var(--blok_files_w) * -0.15) calc(var(--blok_files_h) * -0.15);
  }

}


@media screen and (max-width: 940px) {

  .blok.clanek,
  .blok.clanek.leva,
  .blok_prepinaci.leva,
  .blok.clanek.prava,
  .blok_prepinaci.prava  {
    flex-direction: column;
  }

  .bloky .blok.leva .nadpis,
  .bloky .blok.leva .podnadpis,
  .bloky .blok.leva .text,
  .blok.clanek.leva .podblok,
  .blok_prepinaci.leva .nadpis,
  .blok_prepinaci.leva .podnadpis,
  .blok_prepinaci.leva .text,
  .blok_prepinaci.leva .podblok {
    text-align: center;
  }

  .bloky .blok.prava .nadpis,
  .bloky .blok.prava .podnadpis,
  .bloky .blok.prava .text,
  .blok.clanek.prava .podblok,
  .blok_prepinaci.prava .nadpis,
  .blok_prepinaci.prava .podnadpis,
  .blok_prepinaci.prava .text,
  .blok_prepinaci.prava .podblok {
    text-align: center;
  }

  .blok.clanekpozadi .podblok.ul, .blok.clanekpozadi .podblok.l, .blok.clanekpozadi .podblok.dl,
  .blok.clanekpozadi .podblok.ur, .blok.clanekpozadi .podblok.r, .blok.clanekpozadi .podblok.dr,
  .blok.clanekpozadi .podblok.u, .blok.clanekpozadi .podblok.c, .blok.clanekpozadi .podblok.d {
    width:100%;
  }

  .blok.clanekpozadi .podblok.ul, .blok.clanekpozadi .podblok.l, .blok.clanekpozadi .podblok.dl,
  .blok.clanekpozadi .podblok.ur, .blok.clanekpozadi .podblok.r, .blok.clanekpozadi .podblok.dr,
  .blok.clanekpozadi .podblok.u,
  .blok.clanekpozadi .podblok.d {
    padding: 50px var(--main1pad);
    background:
      /* horizontální přechod */
      linear-gradient(to right,
        transparent 0%,
        rgba(0, 0, 0, 0.6) 50%,
        transparent 100%),
      /* vertikální přechod */
      linear-gradient(to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.3) 50%,
        transparent 100%);
    background-blend-mode: multiply; /* průnik obou gradientů */
  }

  .blok.clanekpozadi:has(.podblok.ul),
  .blok.clanekpozadi:has(.podblok.l),
  .blok.clanekpozadi:has(.podblok.dl),
  .blok.clanekpozadi:has(.podblok.ur),
  .blok.clanekpozadi:has(.podblok.r),
  .blok.clanekpozadi:has(.podblok.dr) {
    justify-content: center;
  }

  .blok.clanekpozadi .podblok.ul, .blok.clanekpozadi .podblok.ur, .blok.clanekpozadi .podblok.ur,
  .blok.clanekpozadi .podblok.dl, .blok.clanekpozadi .podblok.d, .blok.clanekpozadi .podblok.dr {
    justify-content:center;
  }

  .blok.clanekpozadi .podblok.ul, .blok.clanekpozadi .podblok.l, .blok.clanekpozadi .podblok.dl,
  .blok.clanekpozadi .podblok.ul .nadpis, .blok.clanekpozadi .podblok.l .nadpis, .blok.clanekpozadi .podblok.dl .nadpis,
  .blok.clanekpozadi .podblok.ur, .blok.clanekpozadi .podblok.r, .blok.clanekpozadi .podblok.dr,
  .blok.clanekpozadi .podblok.ur .nadpis, .blok.clanekpozadi .podblok.r .nadpis, .blok.clanekpozadi .podblok.dr .nadpis {
    text-align:center;
  }

}

@media screen and (max-width: 500px) {

  :root{
    --css_base-scale: 0.7;   /* co máš „už před 500 px“ */
    --css_break: 500;        /* šířka, od které se začíná škálovat dolů */
    --css_min-total-scale: 0.3; /* kam nejníž může celkový scale spadnout */
  }

  /* Použij celkový scale z JS, jinak čistě base z CSS */
  .blok .files_cont{
    transform-origin: center; /* nebo center */
    transform: scale(var(--js_total-scale, var(--css_base-scale)));

    /* margin počítaný z CELKOVÉHO scale */
    margin:
      calc(var(--blok_files_h) * ((var(--js_total-scale, var(--css_base-scale)) - 1) / 2))
      calc(var(--blok_files_w) * ((var(--js_total-scale, var(--css_base-scale)) - 1) / 2));
  }

}