.zafora-produkt {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

.zafora-produkt *,
.zafora-produkt *::before,
.zafora-produkt *::after {
  box-sizing: border-box;
}

.zafora-produkt .magn {
  margin: 28px 0 16px;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 700;
  color: #222;
}

.zafora-produkt .mg {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.65;
  color: #333;
}

.zafora-produkt .mg strong {
  font-weight: 700;
}

.zafora_obrazek {
  width: 100%;
  margin: 24px 0 32px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#zafora_popis {
  height: clamp(230px, 48vw, 497px);
  background-image: url("../images/zafora_new_drevocal.jpg");
}

/* Bloky materiál? */
.zafora_material {
  min-height: 130px;
  margin: 24px 0;
  padding: 14px 0 14px 170px;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 140px auto;
}

.zafora_material .mg {
  margin-bottom: 0;
}

#drevocal-medifoam {
  background-image: url("../images/drevocal-medifoam.jpg");
}

#drevocal-arctic-foam {
  background-image: url("../images/drevocal-arctic-foam.jpg");
}

#drevocal-lina {
  background-image: url("../images/drevocal-lina.jpg");
}

#drevocal-rouno {
  background-image: url("../images/drevocal-rouno.jpg");
}

/* Pokud se tyto prvky vkládají p?es placeholder -potahy-, budou také responzivní */
#drevocal-potahy {
  width: 100%;
  height: clamp(220px, 38vw, 350px);
  margin: 24px 0 32px;
  background: transparent url("../images/drevocal-potahy.jpg") center top no-repeat;
  background-size: contain;
}

#drevocal-potah-uplet,
#drevocal-potah-aloe-vera,
#drevocal-potah-lyocell,
#drevocal-potah-silverguard,
#drevocal-potah-medicott {
  min-height: 130px;
  margin: 24px 0;
  padding: 10px 0 10px 210px;
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 180px auto;
}

#drevocal-potah-uplet {
  background-image: url("../images/drevocal-potah-uplet.jpg");
}

#drevocal-potah-aloe-vera {
  background-image: url("../images/drevocal-potah-aloe-vera.jpg");
}

#drevocal-potah-lyocell {
  background-image: url("../images/drevocal-potah-lyocell.jpg");
}

#drevocal-potah-silverguard {
  background-image: url("../images/drevocal-potah-silverguard.jpg");
}

#drevocal-potah-medicott {
  background-image: url("../images/drevocal-potah-medicott.jpg");
}

#logo_drevocal {
  height: 190px;
  margin: 28px 0;
  background: transparent url("../images/logo_drevocal.png") center bottom no-repeat;
  background-size: contain;
}

/* Tablet */
@media (max-width: 900px) {
  .zafora-produkt .magn {
    font-size: 20px;
  }

  .zafora-produkt .mg {
    font-size: 16px;
    line-height: 1.6;
  }

  .zafora_material {
    padding-left: 150px;
    background-size: 125px auto;
  }

  #drevocal-potah-uplet,
  #drevocal-potah-aloe-vera,
  #drevocal-potah-lyocell,
  #drevocal-potah-silverguard,
  #drevocal-potah-medicott {
    padding-left: 180px;
    background-size: 155px auto;
  }
}

/* Mobil */
@media (max-width: 600px) {
  .zafora-produkt {
    padding: 0 12px;
  }

  .zafora-produkt .magn {
    margin: 22px 0 12px;
    font-size: 19px;
    line-height: 1.35;
  }

  .zafora-produkt .mg {
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.58;
  }

  #zafora_popis {
    height: clamp(190px, 58vw, 300px);
    margin: 18px 0 26px;
  }

  .zafora_material {
    min-height: auto;
    margin: 24px 0;
    padding: 125px 0 0;
    background-position: center top;
    background-size: 110px auto;
  }

  .zafora_material .mg {
    margin-bottom: 0;
  }

  #drevocal-potahy {
    height: clamp(180px, 60vw, 280px);
    margin: 20px 0 28px;
  }

  #drevocal-potah-uplet,
  #drevocal-potah-aloe-vera,
  #drevocal-potah-lyocell,
  #drevocal-potah-silverguard,
  #drevocal-potah-medicott {
    min-height: auto;
    margin: 24px 0;
    padding: 135px 0 0;
    background-position: center top;
    background-size: 120px auto;
  }

  #logo_drevocal {
    height: 140px;
    margin: 22px 0;
  }
}

/* Menší mobily */
@media (max-width: 400px) {
  .zafora-produkt .magn {
    font-size: 18px;
  }

  .zafora-produkt .mg {
    font-size: 15px;
  }

  #zafora_popis {
    height: 180px;
  }

  #drevocal-potahy {
    height: 170px;
  }
}