/* CSS Reset */
#prod-desc-container, #prod-desc-container * {
  box-sizing: border-box;
}

#prod-desc-container {
  font-size: 16px;
  max-width: 920px;
  margin: 0 auto;
  font-family: sans-serif;
}

#prod-desc-container .headline-2 {
  font-size: 1.5em;
  margin: 0;
}

#prod-desc-container .headline-3 {
  font-size: 1.17em;
  margin: 1em 0;
}

#prod-desc-container .paragraph {
  margin: 1em 0;
  color: rgb(112, 112, 112);
  line-height:22px;
}

#prod-desc-container .desc-img.lazy, 
#prod-desc-container .desc-img {
  width: initial;
  max-width: 100%;
  height: auto;
  border-radius:12px;
}

/* Flexbox Layout */
#prod-desc-container .flex-container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  margin-bottom:20px;
  border-radius:12px;
}

#prod-desc-container .flex-halfer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  border-radius:12px;
}


#prod-desc-container .youtube-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; 
  margin: 1em 0; 
  border-radius:12px;
  overflow:hidden;
}

#prod-desc-container .youtube-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none; 
}

#prod-desc-container .flex-halfer:nth-child(odd) {
  color: #fff;
  background: #000;
  margin-bottom:30px;
  padding:20px;
}

#prod-desc-container .flex-halfer:nth-child(even) {
  color: initial;
  background: initial;
  margin-bottom:20px;
}

#prod-desc-container .flex-container > :not(.media-col) {
  padding-left:30px;
  padding-right:30px;
  padding-bottom:10px;
}


#prod-desc-container .flex-bg {
  align-items:normal;
  gap:10px;
}
#prod-desc-container .flex-bg .col {
  background:#edecec;
  border-radius:12px;
}

#prod-desc-container .col {
  padding: 1em;
}

#prod-desc-container .col-1 {
  width: 100%;
}

#prod-desc-container .col-2 {
  width: 50%;
}

#prod-desc-container .col-3 {
  width: 32%;
}

#prod-desc-container .col-4 {
  width: 25%;
}

#prod-desc-container .col.right {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

#prod-desc-container .col.left {
  justify-content: flex-start;
  text-align: left;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

#prod-desc-container .col.center {
  justify-content: center;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
}

/* Naprzemienny układ */
#prod-desc-container .flex-container.revert {
  flex-direction: row-reverse;
}

#prod-desc-container .w100 {
  width: 100%;
}

#prod-desc-container .w50 {
  width: 50%;
}

#prod-desc-container .wo100 {
  width: 100%;
  order: -1;
}

#prod-desc-container .video-container {
  text-align:center;
}

/* Responsywność */
@media (max-width: 919px) {
  #prod-desc-container {
      font-size: 14px;
      max-width: 100%;
  }

  #prod-desc-container .col-1,
  #prod-desc-container .col-2,
  #prod-desc-container .col-3,
  #prod-desc-container .col-4,
  #prod-desc-container .flex-halfer {
      width: 100%;
  }

  #prod-desc-container .flex-container > :not(.media-col) {
    padding-left:0px;
    padding-right:0px;
  }

  #prod-desc-container .flex-halfer {
    flex-direction: column;
  }

  #prod-desc-container .w50 {
    width:100%;
  }

  #prod-desc-container .col.right {
      justify-content: flex-start;
      text-align: left;
  }

  #prod-desc-container .flex-container.revert {
      flex-direction: column-reverse;
  }
}

/* Style dla osadzonych filmików */
#prod-desc-container .embed {
  max-width: 100%;
  height: auto;
  margin: 1em 0;
}