/* Only the homepage and the hanging-balconies product page enqueue this layout. */
#porovnanie-balkonov.hs-montaz {
  --hm-columns: minmax(0, .9fr) minmax(0, 1fr);
  --hm-gap: clamp(32px, 5.9vw, 92px);
  box-sizing: border-box;
  width: 100%;
  max-width: var(--max,1140px);
  margin: clamp(32px,5vw,72px) auto;
  padding: 0 24px;
  color: #162a22;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  scroll-margin-top: 145px;
}
/* Share the gutters used by the visualisation immediately above on the homepage. */
#balkonovy-atelier > #porovnanie-balkonov {
  width: calc(100% - clamp(32px,10vw,160px));
  max-width: 1240px;
  padding-inline: 0;
}
#porovnanie-balkonov .hm-body,
#porovnanie-balkonov .hm-lower,
#porovnanie-balkonov .hm-bottom {
  display: grid;
  grid-template-columns: var(--hm-columns);
  column-gap: var(--hm-gap);
}
#porovnanie-balkonov .hm-body { align-items: center; }
#porovnanie-balkonov .hm-intro {
  padding: 0;
  gap: clamp(20px,2.6vw,36px);
  background: transparent;
  color: #122e26;
}
#porovnanie-balkonov .hm-eyebrow {
  color: #47705b;
  padding-bottom: 20px;
  letter-spacing: .03em;
  text-transform: none;
  font-size: 13px;
}
#porovnanie-balkonov .hm-intro h2 { color: #122e26; }
#porovnanie-balkonov .hm-intro h2 span:not(.hm-sr) { color: #40734f; }
#porovnanie-balkonov .hm-intro .hm-lead { color: #475b50; max-width: 40ch; }
#porovnanie-balkonov .hm-choices button {
  color: #234d37;
  background: #edf3ee;
  border: 0;
  border-radius: 7px;
  padding-inline: 16px;
}
#porovnanie-balkonov .hm-choices button:hover { background: #dfebe1; }
#porovnanie-balkonov .hm-choices button[aria-pressed="true"] { background: #173f30; color: white; }
#porovnanie-balkonov .hm-intro button:focus-visible { outline-color: #307744; }
#porovnanie-balkonov .hm-stage {
  width: 100%;
  min-height: 0;
  aspect-ratio: 1.48;
  border-radius: 10px;
}
#porovnanie-balkonov .hm-lower { padding: 12px 0 0; border: 0; }
#porovnanie-balkonov .hm-controls { grid-column: 2; }
#porovnanie-balkonov .hm-bottom { padding: clamp(20px,2.6vw,34px) 0 0; align-items: start; }
#porovnanie-balkonov .hm-material { min-width: 0; }
#porovnanie-balkonov .hm-footnote { padding: 16px 0 0; }
#porovnanie-balkonov [hidden] { display: none !important; }
@media(max-width:820px) {
  #balkonovy-atelier > #porovnanie-balkonov { width: calc(100% - 36px); }
  #porovnanie-balkonov.hs-montaz { --hm-gap: 26px; }
}
@media(max-width:650px) {
  #porovnanie-balkonov .hm-body,
  #porovnanie-balkonov .hm-lower,
  #porovnanie-balkonov .hm-bottom { grid-template-columns: minmax(0,1fr); }
  #porovnanie-balkonov .hm-body { row-gap: 17px; }
  #porovnanie-balkonov .hm-intro { gap: 15px; }
  #porovnanie-balkonov .hm-eyebrow { padding-bottom: 10px; }
  #porovnanie-balkonov .hm-stage { aspect-ratio: 1.46; }
  #porovnanie-balkonov .hm-controls { grid-column: 1; }
  #porovnanie-balkonov .hm-bottom { row-gap: 16px; }
  #porovnanie-balkonov .hm-material { border: 0; padding: 0; margin: 0; }
  #porovnanie-balkonov .hm-footnote { padding-top: 12px; }
}
@media(max-width:420px) {
  #balkonovy-atelier > #porovnanie-balkonov { width: calc(100% - 30px); }
}