.hp-weather-cover{container-type:inline-size;position:relative;isolation:isolate;display:grid;min-height:clamp(230px,28vw,340px);overflow:hidden;background-color:#33475b;background-image:var(--hp-weather-cover-image);background-position:center;background-size:cover;color:#fff}
.hp-weather-cover__shade{position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(10,18,27,.86),rgba(10,18,27,.34) 58%,rgba(10,18,27,.18)),linear-gradient(0deg,rgba(10,18,27,.52),transparent 64%)}
.hp-weather-cover__content{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"place current" "meta meta";align-content:center;align-items:end;gap:1rem;padding:clamp(1rem,4cqi,2rem)}
.hp-weather-cover__place{grid-area:place;min-width:0;align-self:start}.hp-weather-cover__place>span{display:block;overflow:hidden;max-width:70ch;color:var(--hp-accent);font-size:.68rem;font-weight:800;letter-spacing:.06em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}.hp-weather-cover h1{margin:.22rem 0;font-size:clamp(1.65rem,5cqi,3rem);font-weight:850;letter-spacing:-.035em}.hp-weather-cover__place p{max-width:76ch;margin:.35rem 0 0;color:rgba(255,255,255,.84);font-size:.78rem;line-height:1.45}
.hp-weather-cover__current{grid-area:current;display:flex;align-items:center;gap:.35rem}.hp-weather-cover__current img{width:clamp(68px,10cqi,108px);height:clamp(68px,10cqi,108px);object-fit:contain}.hp-weather-cover__current>i{font-size:clamp(3.6rem,9cqi,6rem)}.hp-weather-cover__current strong{font-size:clamp(2.3rem,7cqi,4.2rem);line-height:.9}.hp-weather-cover__current small{font-size:.36em}
.hp-weather-cover dl{grid-area:meta;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;margin:0;padding-top:.85rem;border-top:1px solid rgba(255,255,255,.24)}.hp-weather-cover dl>div{display:flex;align-items:center;gap:.4rem}.hp-weather-cover dt{color:rgba(255,255,255,.72);font-size:.68rem;font-weight:600}.hp-weather-cover dt i{color:var(--hp-accent)}.hp-weather-cover dd{margin:0;font-size:.76rem;font-weight:800}
@container(max-width:520px){.hp-weather-cover__content{grid-template-columns:minmax(0,1fr) auto;gap:.5rem;padding:1rem}.hp-weather-cover h1{font-size:1.55rem}.hp-weather-cover__current{align-items:flex-end;flex-direction:column;gap:0}.hp-weather-cover dl{gap:.4rem .8rem}.hp-weather-cover dt{font-size:.6rem}.hp-weather-cover dd{font-size:.68rem}}