/* DASHBOARD */
.slide.is-dashboard { padding: 48px; border-top: 8px solid var(--accent); background-color: var(--bg); }
.slide.is-dashboard .top { line-height: 0; }

/* CARDS */
.slide.is-dashboard .info-cards { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 24px; }
.slide.is-dashboard .info-cards .card { padding: 28px; border-radius: 12px; background-color: var(--bg-alt); color: var(--text-bg-alt); }
.slide.is-dashboard .info-cards .card { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.slide.is-dashboard .info-cards .card .card-header { display: flex; align-items: center; justify-content: space-between; }
.slide.is-dashboard .info-cards .card .card-header .card-title { font-size: 1.5rem; }
.slide.is-dashboard .info-cards .card .card-header .icon { line-height: 1; width: 2.5rem; height: 2.5rem; border-radius: 50%; background-color: var(--icon-wrap); display: flex; align-items: center; justify-content: center; }
.slide.is-dashboard .info-cards .card .card-header .icon img { width: 1.125rem; height: 1.125rem; object-fit: contain; object-position: center; }
.slide.is-dashboard .info-cards .card .card-body h2 { font-size: 3rem; line-height: 1; margin-bottom: 0.75rem; }
.slide.is-dashboard .info-cards .card .card-body h2 + p { font-size: 1.5rem; line-height: 1; }

/** TODAY */
.slide.is-dashboard .info-cards .card.today { background-color: var(--accent); }
.slide.is-dashboard .info-cards .card.today * { color: var(--text-accent); }

/** WEATHER */
.slide.is-dashboard .info-cards .card.weather { padding-bottom: 0; }
.slide.is-dashboard .info-cards .card.weather .today { padding-right: 12px; }
.slide.is-dashboard .info-cards .card.weather .today .weather-icon { display: flex; align-items: center; column-gap: 0.75rem; }
.slide.is-dashboard .info-cards .card.weather .today .weather-icon img { width: 3.375rem; height: 3.375rem; }
.slide.is-dashboard .info-cards .card.weather .today .weather-icon .temperature { font-size: 3rem; font-weight: 600; }
.slide.is-dashboard .info-cards .card.weather .today .weather-code { font-size: 1.25rem; font-weight: 500; white-space: nowrap; }

.slide.is-dashboard .info-cards .card.weather .weather { display: flex; align-items: center; padding-bottom: 12px; }
.slide.is-dashboard .info-cards .card.weather .weather .next-hours { display: flex; width: 100%; align-items: center; justify-content: center; }
.slide.is-dashboard .info-cards .card.weather .weather .next-hours .hour { display: flex; flex-direction: column; align-items: center; padding: 0 0.875rem; }
.slide.is-dashboard .info-cards .card.weather .weather .next-hours .hour:first-child { padding-left: 0; }
.slide.is-dashboard .info-cards .card.weather .weather .next-hours .hour:last-child { padding-right: 0; }
.slide.is-dashboard .info-cards .card.weather .weather .next-hours .hour:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, .15); }
.slide.is-dashboard .info-cards .card.weather .weather .next-hours .hour img { width: 2rem; height: 2rem; object-fit: contain; }
.slide.is-dashboard .info-cards .card.weather .weather .next-hours .hour span { font-weight: 500; font-size: 0.875rem; margin-top: 0.5rem; text-align: center; } 
.slide.is-dashboard .info-cards .card.weather .weather .next-hours .hour span .precipitation { font-weight: 300; font-size: 0.875rem; } 

.slide.is-dashboard .info-cards .card.weather .weather-card-footer { display: flex; align-items: center; column-gap: 5px; margin: 0 -28px; padding: 10px 28px; border-radius: 0 0 12px 12px; background-color: var(--accent); color: var(--text-accent); }
.slide.is-dashboard .info-cards .card.weather .weather-card-footer p { font-weight: 500; font-size: 0.875rem; }
.slide.is-dashboard .info-cards .card.weather .weather-card-footer svg { width: 0.75rem; height: 0.75rem; fill: var(--text-accent); }
.slide.is-dashboard .info-cards .card.weather .weather-card-footer.is-danger { color: #2e2d2c; background-color: #F4BB2C; }
.slide.is-dashboard .info-cards .card.weather .weather-card-footer.is-danger svg { fill: #2e2d2c; }

/* FEATURED SLIDES */
.slide.is-dashboard .featured-items { height: 100%; margin: 0 calc(-1 * var(--outer-spacing)); padding: 0 var(--outer-spacing); overflow-x: scroll; overflow-y: hidden; -ms-overflow-style: none; scrollbar-width: none; }
.slide.is-dashboard .featured-items::-webkit-scrollbar { display: none; }

.slide.is-dashboard .featured-items .featured-items-scroll-track { display: flex; flex-wrap: nowrap; white-space: nowrap; height: 100%; }

.slide.is-dashboard .featured-items .is-partial { flex-shrink: 0; position: relative; width: calc(33% - 24px); white-space: normal; overflow: hidden; padding: 2.25rem; border-radius: 16px; background-color: var(--bg-color); display: flex; flex-direction: column; justify-content: space-between; }
.slide.is-dashboard .featured-items .is-partial.has-overlay { background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 45%, rgba(0, 0, 0, 0.75) 75%); }
.slide.is-dashboard .featured-items .is-partial .card-image { position: absolute; width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0; object-fit: cover; object-position: center; }
.slide.is-dashboard .featured-items .is-partial.image-contain .card-image { object-fit: contain; z-index: -1; }
.slide.is-dashboard .featured-items .is-partial.has-overlay .card-image { z-index: -1; }
.slide.is-dashboard .featured-items .is-partial .card-header { display: flex; align-items: center; column-gap: 8px; position: relative; }
.slide.is-dashboard .featured-items .is-partial .card-header .tag { border-radius: 32px; padding: 5px 12px; line-height: 1; font-weight: 600; font-size: 0.75rem; background-color: var(--bg-alt); color: var(--text-bg-alt); }
.slide.is-dashboard .featured-items .is-partial .card-header .tag.tag-primary { background-color: var(--accent); color: var(--text-accent); }
.slide.is-dashboard .featured-items .is-partial .card-body { position: relative; }
.slide.is-dashboard .featured-items .is-partial .card-body h3 { font-size: 1.5rem; line-height: 1.2; margin-bottom: 8px; }
.slide.is-dashboard .featured-items .is-partial .card-body * { color: #f2f2f2; }
.slide.is-dashboard .featured-items .is-partial .card-body p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 1rem; }
.slide.is-dashboard .featured-items .is-partial.is-dark .card-body * { color: var(--bg-alt); }