/* Loaded only by the Ice Cream Banner detail page. */
.icecream-banner-page .project-hero{min-height:clamp(340px,32vw,460px);background:#faf8f3;color:#554d4a}
.icecream-banner-page .project-hero::after{display:none}
.icecream-banner-page .project-hero-overlay{justify-content:center;padding-block:64px}
.icecream-banner-page .project-label{color:#368bcb}
.icecream-banner-page .project-hero h1{font-size:clamp(40px,7vw,92px);text-wrap:balance}
.icecream-banner-page .project-category{max-width:100%;text-wrap:balance}
.icecream-banner-page .detail-heading h2,.icecream-banner-page h3{text-wrap:balance;overflow-wrap:anywhere}
.icecream-banner-page .banner-visual{width:min(100%,680px);margin:0 auto}
.icecream-banner-page .banner-visual img{display:block;width:100%;height:auto}
/* Preserve the points background independently of section order. */
.icecream-banner-page .points-section{background:var(--soft)}
.icecream-banner-page .design-points li>div{min-width:0}
.icecream-banner-page .design-points li:nth-child(4) h3{width:auto}
@media(min-width:768px) and (max-width:820px){
  .icecream-banner-page .design-points li:nth-child(-n+4){padding-inline:12px;gap:10px}
}
@media(max-width:767px){
  .icecream-banner-page .project-hero{min-height:340px}
}
@media(max-width:359px){
  .icecream-banner-page .project-hero{min-height:310px}
  .icecream-banner-page .detail-heading h2{font-size:26px}
}