:root {

    --glass: rgba(255, 255, 255, 0.2);
}
.hourly-forecast {
    margin: 20px 0;
    padding: 15px 0;
    border-top: 1px solid var(--glass);
}

.hourly-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 15px;
    text-align: left;
}

.hourly-list {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 10px 5px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.hourly-list::-webkit-scrollbar { display: none; }
.hourly-list { -ms-overflow-style: none; scrollbar-width: none; }

.hour-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 65px;
    scroll-snap-align: center;
    background: var(--glass);
    padding: 10px;
    border-radius: 15px;
}

.hour-time { font-size: 0.8rem; font-weight: 300; margin-bottom: 5px; }
.hour-icon { font-size: 1.2rem; margin-bottom: 5px; }
.hour-temp { font-size: 1rem; font-weight: 700; }