.weather-cities {
    margin-block: 1.75rem;
    padding: clamp(.75rem, 2vw, 1.25rem);
    border: 1px solid var(--line);
    border-radius: .5rem;
    background: #e8ebe1;
}

.weather-cities h2 {
    margin-block-end: .75rem;
    font-size: 1.1rem;
}

.weather-cities ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 7rem), 1fr));
    gap: .45rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.weather-cities a {
    display: grid;
    place-items: center;
    height: 100%;
    min-height: 2.5rem;
    padding: .25rem .45rem;
    border: 1px solid #aab9a8;
    border-radius: .35rem;
    background: #faf9f3;
    text-align: center;
    font-size: .86rem;
}

.weather-cities a:hover {
    border-color: var(--sea);
    text-decoration: underline;
}

.weather-cities a[aria-current="page"] {
    border-color: var(--sea);
    background: var(--sea);
    color: #fff;
    font-weight: 700;
}

.weather-city-forecast {
    scroll-margin-top: 1rem;
    margin-block-end: .8rem;
}

.weather-city-forecast h2 {
    font-size: 1.2rem;
}