/* Notifications: existing CVSL cards and buttons, with a featured archive panel. */
.notifications-intro {
  margin: 0 0 var(--space-4);
  color: var(--color-muted);
  line-height: 1.625;
}
.notifications-updates {
  margin-bottom: var(--space-4);
}
.notifications-feature {
  display: grid;
  background: var(--color-cream);
}
.notifications-feature .subheading {
  color: var(--color-navy);
  text-align: left;
}
.notifications-feature-image {
  width: 100%;
  height: 100%;
  max-height: 18rem;
  object-fit: cover;
}
@media (min-width: 48rem) {
  .notifications-feature {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: center;
  }
  .notifications-feature-image {
    max-height: none;
  }
}
@media (min-width: 60rem) {
  .notifications-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
}

.notifications-heading { text-align: left; }
.notifications-badge {
  position: static;
  display: inline-block;
  margin-bottom: var(--space-3);
  background: var(--color-navy);
  white-space: normal;
}
.notifications-updates .subheading { text-align: left; color: var(--color-navy); }
.notifications-cards .notification-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
}
.notifications-cards .download-btn { margin-top: auto; }

.notifications-cards .notification-content { gap: var(--space-2); }
.notifications-card-image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin: var(--space-2) 0 var(--space-4);
}
.notifications-preview { width: 100%; margin: var(--space-2) 0 var(--space-4); }
.notifications-statistics-image { width: 100%; height: auto; border: 1px solid var(--color-border); }
.notifications-preview figcaption { font-size: .8rem; margin-top: var(--space-2); }
.notifications-cards .download-btn { margin-top: auto; }
.notifications-previous { list-style: none; padding: 0; margin: 0; }
.notifications-previous-row { display: grid; gap: var(--space-3); align-items: center; }
.notifications-previous-row h3 { margin: 0; text-align: left; font-size: 1rem; }
.notifications-previous-row p, .notifications-previous-row .notifications-badge { margin: 0; }
.notifications-previous-row a { color: var(--color-navy); text-decoration: underline; }
@media (min-width: 48rem) {
  .notifications-previous-row { grid-template-columns: auto auto minmax(0, 1fr); }
}