.hero-weather{position:absolute;z-index:4;right:var(--gutter);top:150px;width:min(360px,calc(100vw - 2*var(--gutter)));padding:20px 22px 15px;border:1px solid #ffffff55;border-radius:16px;background:linear-gradient(145deg,#153f42c9,#102e33b0);box-shadow:0 18px 55px #061d2450;color:#fff;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);text-align:left}.weather-top{display:flex;align-items:center;justify-content:space-between;gap:12px;color:#ffffffc9;font-size:9px;letter-spacing:.16em;text-transform:uppercase}.weather-city{font-size:9px;letter-spacing:.08em;color:#ffffff9e}.weather-main{display:grid;grid-template-columns:48px auto 1fr;align-items:center;gap:10px;padding:12px 0 10px}.weather-icon{display:grid;place-items:center;width:44px;height:44px;color:#efc7a0}.weather-icon svg{width:40px;height:40px}.weather-temp{font:500 42px/.95 var(--serif);letter-spacing:-.04em}.weather-condition{font-size:12px;line-height:1.35;color:#ffffffea}.weather-details{display:flex;gap:22px;border-top:1px solid #ffffff30;padding-top:11px}.weather-details>span{display:grid;gap:4px}.weather-details small{font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:#ffffffa8}.weather-details strong{font-size:11px;font-weight:600}.weather-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:12px;color:#ffffff99;font-size:8px;line-height:1.35}.weather-foot a{color:#fff;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}.hero-weather[data-state=error] .weather-main{padding-bottom:4px}.hero-weather[data-state=error] .weather-condition{grid-column:2/4;font-size:11px;color:#ffffffc9}.hero-weather:focus-within{outline:2px solid #efc7a0;outline-offset:3px}
@media(max-width:900px){.hero-weather{position:relative;right:auto;bottom:auto;align-self:flex-end;margin:auto var(--gutter) 23px;width:min(360px,calc(100% - 2*var(--gutter)));padding:17px 18px 13px}.weather-main{grid-template-columns:42px auto 1fr;padding:9px 0 9px}.weather-icon,.weather-icon svg{width:36px;height:36px}.weather-temp{font-size:36px}.weather-condition{font-size:11px}.weather-details{gap:18px;padding-top:9px}.weather-foot{margin-top:9px}}
@media(max-width:420px){.hero-weather{padding:15px 15px 12px;border-radius:13px}.weather-top{font-size:8px}.weather-details{gap:15px}.weather-details small{font-size:7px}.weather-foot{font-size:7px}}
@media(prefers-reduced-transparency:reduce){.hero-weather{backdrop-filter:none;-webkit-backdrop-filter:none;background:#153f42f2}}