#code-preview-wrapper {
  display: flex;
}
.code-preview_code-block {
  width: 465px;
  font-size: 13px;
}
.debug-layout {
  outline: 1px solid blue;
}
.code-preview_code-block_description {
  text-align: center;
  font-size: 1.2em;
}
.code-preview_code-block_right {
  margin-left: 5px;
}
@container (min-width: 1000px) {
  .code-preview_code-block_right {
    margin-left: 10px;
  }
}
@container (min-width: 1280px) {
  .code-preview_code-block_right {
    margin-left: 20px;
  }
}
@container ((max-width: 945px) and (min-width: 611px)) or (max-width: 470px) {
  .code-preview_code-block {
    width: 415px;
    font-size: 12px;
  }
  .debug-layout {
    outline: 1px solid green;
  }
}
@container ((max-width: 845px) and (min-width: 611px)) or (max-width: 420px) {
  .code-preview_code-block {
    width: 410px;
    font-size: 11px;
  }
  .debug-layout {
    outline: 1px solid yellow;
  }
}
@container (max-width: 410px) or ((max-width: 830px) and (min-width: 611px)) {
  .code-preview_code-block {
    width: 360px;
    font-size: 10px;
  }
  .debug-layout {
    outline: 1px solid orange;
  }
}
@container (max-width: 365px) or ((max-width: 730px) and (min-width: 611px)) {
  .code-preview_code-block {
    width: 300px;
    font-size: 9px;
  }
  .debug-layout {
    outline: 1px solid red;
  }
}
@container (max-width: 610px) {
  #code-preview-wrapper {
    flex-direction: column;
  }
  .code-preview_code-block_right {
    margin-left: 0px;
  }
  .code-preview_code-block_description {
    margin-top: -5px;
    margin-bottom: 10px;
  }
}
