/*************************************************************************
 *
 * Copyright (c) 2026 - Datatailr Inc.
 * All Rights Reserved.
 *
 * Custom styling to match Datatailr GUI
 *************************************************************************/

/* Import Inter font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* ============================================
   CSS Variables - Light Theme
   ============================================ */
:root {
  /* Primary brand colors (from GUI) */
  --dt-primary: #3bceac;
  --dt-primary-hover: #2fb898;
  --dt-primary-light: #d8f5ee;
  
  /* Accent colors (from GUI logo) */
  --dt-accent-yellow: #ffd23f;
  --dt-accent-pink: #ee38b4;
  --dt-accent-blue: #6a97ec;
  
  /* Environment colors */
  --dt-env-prod: #37caa8;
  --dt-env-pre: #edbd6b;
  --dt-env-dev: #6a97ec;
  --dt-env-system: #7a8490;
  
  /* Base colors - Light */
  --dt-base-100: #ffffff;
  --dt-base-200: #eff0f2;
  --dt-base-300: #c6cad2;
  --dt-base-content: #596571;
  
  /* Text colors */
  --dt-text-primary: #414447;
  --dt-text-secondary: #596571;
  --dt-text-muted: #848e98;
  
  /* Font */
  --dt-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Radius */
  --dt-radius: 0.5rem;
  --dt-radius-lg: 0.75rem;
}

/* ============================================
   MkDocs Material Theme Overrides - Light
   ============================================ */
[data-md-color-scheme="default"] {
  /* Primary colors */
  --md-primary-fg-color: var(--dt-primary);
  --md-primary-fg-color--light: var(--dt-primary-light);
  --md-primary-fg-color--dark: var(--dt-primary-hover);
  --md-primary-bg-color: #ffffff;
  --md-primary-bg-color--light: #ffffff;
  
  /* Accent colors */
  --md-accent-fg-color: var(--dt-primary);
  --md-accent-fg-color--transparent: rgba(59, 206, 172, 0.1);
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: var(--dt-primary-light);
  
  /* Background */
  --md-default-bg-color: var(--dt-base-100);
  --md-default-bg-color--light: var(--dt-base-200);
  --md-default-bg-color--lighter: var(--dt-base-200);
  --md-default-bg-color--lightest: var(--dt-base-300);
  
  /* Text */
  --md-default-fg-color: var(--dt-text-primary);
  --md-default-fg-color--light: var(--dt-text-secondary);
  --md-default-fg-color--lighter: var(--dt-text-muted);
  --md-default-fg-color--lightest: var(--dt-base-300);
  
  /* Code */
  --md-code-bg-color: var(--dt-base-200);
  --md-code-fg-color: var(--dt-text-primary);
  
  /* Footer */
  --md-footer-bg-color: #1e1e1e;
  --md-footer-bg-color--dark: #1a1a1a;
  --md-footer-fg-color: #ededed;
  --md-footer-fg-color--light: rgba(255, 255, 255, 0.7);
  --md-footer-fg-color--lighter: rgba(255, 255, 255, 0.5);
}

/* ============================================
   MkDocs Material Theme Overrides - Dark
   ============================================ */
[data-md-color-scheme="slate"] {
  /* Primary colors */
  --md-primary-fg-color: var(--dt-primary);
  --md-primary-fg-color--light: #2f4c45;
  --md-primary-fg-color--dark: var(--dt-primary-hover);
  --md-primary-bg-color: #1e1e1e;
  --md-primary-bg-color--light: #2c2c2c;
  
  /* Accent colors */
  --md-accent-fg-color: var(--dt-primary);
  --md-accent-fg-color--transparent: rgba(59, 206, 172, 0.15);
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: #2f4c45;
  
  /* Background */
  --md-default-bg-color: #1e1e1e;
  --md-default-bg-color--light: #2c2c2c;
  --md-default-bg-color--lighter: #383837;
  --md-default-bg-color--lightest: #444444;
  
  /* Text */
  --md-default-fg-color: #ededed;
  --md-default-fg-color--light: rgba(237, 237, 237, 0.8);
  --md-default-fg-color--lighter: rgba(237, 237, 237, 0.6);
  --md-default-fg-color--lightest: rgba(237, 237, 237, 0.3);
  
  /* Code */
  --md-code-bg-color: #2c2c2c;
  --md-code-fg-color: #ededed;
  
  /* Footer */
  --md-footer-bg-color: #1a1a1a;
  --md-footer-bg-color--dark: #141414;
  --md-footer-fg-color: #ededed;
  --md-footer-fg-color--light: rgba(255, 255, 255, 0.7);
  --md-footer-fg-color--lighter: rgba(255, 255, 255, 0.5);
  
  /* Typeset */
  --md-typeset-a-color: var(--dt-primary);
}

/* ============================================
   Typography
   ============================================ */
body,
.md-typeset {
  font-family: var(--dt-font-family);
  font-optical-sizing: auto;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  font-family: var(--dt-font-family);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.md-typeset h1 {
  font-weight: 700;
}

/* ============================================
   Header / Navigation
   ============================================ */
.md-header {
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  color: var(--dt-text-primary);
}

.md-header[data-md-state="shadow"] {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

[data-md-color-scheme="slate"] .md-header {
  background-color: #1e1e1e;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  color: #ededed;
}

/* Header text and icons */
.md-header__button {
  color: var(--dt-text-primary);
}

[data-md-color-scheme="slate"] .md-header__button {
  color: #ededed;
}

/* Header title - hidden since logo is sufficient */
.md-header__topic {
  display: none;
}


/* Logo switching for light/dark mode */
.md-header__button.md-logo {
  padding: 0;
  margin: 0;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  width: auto;
  height: 3rem;
  content: url('../assets/dt_icon_light.svg');
}

[data-md-color-scheme="slate"] .md-header__button.md-logo img,
[data-md-color-scheme="slate"] .md-header__button.md-logo svg {
  height: 3rem;
  content: url('../assets/dt_icon_dark.svg');
}

/* Compact header */
.md-header__inner {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

.md-header__title {
  font-weight: 600;
}

/* ============================================
   Three-Way Theme Toggle (Light / Dark / System)
   ============================================ */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--dt-base-200);
  border-radius: 9999px;
  padding: 3px;
  margin-right: 0.5rem;
  border: 1px solid var(--dt-base-300);
}

[data-md-color-scheme="slate"] .theme-toggle {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}

.theme-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 9999px;
  cursor: pointer;
  color: var(--dt-text-muted);
  transition: all 0.2s ease;
}

.theme-toggle__btn:hover {
  color: var(--dt-text-primary);
  background: var(--dt-base-300);
}

[data-md-color-scheme="slate"] .theme-toggle__btn {
  color: rgba(255, 255, 255, 0.5);
}

[data-md-color-scheme="slate"] .theme-toggle__btn:hover {
  color: #ededed;
  background: rgba(255, 255, 255, 0.1);
}

.theme-toggle__btn.active {
  background: var(--dt-primary);
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(59, 206, 172, 0.3);
}

.theme-toggle__btn.active:hover {
  background: var(--dt-primary-hover);
  color: #ffffff;
}

.theme-toggle__btn svg {
  width: 14px;
  height: 14px;
}

/* Hide the default MkDocs palette toggle */
.md-header__option {
  display: none !important;
}

/* Navigation tabs */
.md-tabs {
  background-color: #ffffff;
  border-bottom: 1px solid var(--dt-base-200);
}

[data-md-color-scheme="slate"] .md-tabs {
  background-color: #1e1e1e;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.md-tabs__link {
  font-weight: 500;
  opacity: 1;
  transition: all 0.2s ease;
  color: var(--dt-text-secondary) !important;
}

[data-md-color-scheme="slate"] .md-tabs__link {
  color: rgba(255, 255, 255, 0.7) !important;
}

.md-tabs__link:hover {
  color: var(--dt-primary) !important;
}

.md-tabs__link--active,
.md-tabs__item--active .md-tabs__link {
  color: var(--dt-primary) !important;
  font-weight: 600;
}

[data-md-color-scheme="slate"] .md-tabs__link--active,
[data-md-color-scheme="slate"] .md-tabs__item--active .md-tabs__link {
  color: var(--dt-primary) !important;
}

/* ============================================
   Sidebar
   ============================================ */
.md-nav__link {
  font-weight: 500;
  transition: color 0.2s ease;
}

.md-nav__link:hover {
  color: var(--dt-primary);
}

.md-nav__item--active > .md-nav__link {
  color: var(--dt-primary);
  font-weight: 600;
}

/* Section headers in sidebar - always highlighted */
.md-nav__item--section > .md-nav__link {
  color: var(--dt-primary) !important;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  margin-top: 0.5rem;
}

[data-md-color-scheme="slate"] .md-nav__item--section > .md-nav__link {
  color: var(--dt-primary) !important;
}

/* ============================================
   Buttons
   ============================================ */
.md-button {
  border-radius: var(--dt-radius);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  transition: all 0.2s ease;
}

.md-button--primary {
  background-color: var(--dt-primary);
  border-color: var(--dt-primary);
  color: #ffffff;
}

.md-button--primary:hover,
.md-button--primary:focus {
  background-color: var(--dt-primary-hover);
  border-color: var(--dt-primary-hover);
  color: #ffffff;
}

/* ============================================
   Cards (Grid Layout on Home)
   ============================================ */
.grid.cards ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 2rem 0;
}

.grid.cards li {
  background: var(--md-default-bg-color--light);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: var(--dt-radius-lg);
  padding: 1.5rem;
  transition: all 0.2s ease;
}

.grid.cards li:hover {
  border-color: var(--dt-primary);
  box-shadow: 0 4px 12px rgba(59, 206, 172, 0.15);
  transform: translateY(-2px);
}

.grid.cards h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: var(--md-default-fg-color);
}

.grid.cards p {
  margin-bottom: 1rem;
  color: var(--md-default-fg-color--light);
}

/* ============================================
   Code Blocks
   ============================================ */
.md-typeset code {
  border-radius: 4px;
  font-size: 0.85em;
  padding: 0.2em 0.4em;
}

.md-typeset pre {
  border-radius: var(--dt-radius);
  box-shadow: none;
}

.md-typeset pre > code {
  font-size: 0.8em;
  line-height: 1.6;
}

/* Syntax highlighting adjustments */
.highlight .hll {
  background-color: rgba(59, 206, 172, 0.15);
}

/* ============================================
   Admonitions
   ============================================ */
.md-typeset .admonition,
.md-typeset details {
  border-radius: var(--dt-radius);
  box-shadow: none;
  border-left: 4px solid;
}

.md-typeset .admonition.note,
.md-typeset details.note {
  border-left-color: var(--dt-accent-blue);
}

.md-typeset .admonition.tip,
.md-typeset details.tip {
  border-left-color: var(--dt-primary);
}

.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-left-color: var(--dt-accent-yellow);
}

.md-typeset .admonition.danger,
.md-typeset details.danger {
  border-left-color: var(--dt-accent-pink);
}

/* ============================================
   Tables
   ============================================ */
.md-typeset table:not([class]) {
  border-radius: var(--dt-radius);
  overflow: hidden;
  box-shadow: none;
  border: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset table:not([class]) th {
  background-color: var(--md-default-bg-color--light);
  font-weight: 600;
}

.md-typeset table:not([class]) tr:hover {
  background-color: var(--md-accent-fg-color--transparent);
}

/* ============================================
   Search
   ============================================ */
.md-search__form {
  border-radius: var(--dt-radius);
  overflow: hidden;
  background-color: var(--dt-base-200);
  border: 1px solid var(--dt-base-300);
}

.md-search__input {
  border-radius: var(--dt-radius);
  background-color: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  color: var(--dt-text-primary);
}

.md-search__input::placeholder {
  color: var(--dt-text-muted);
}

.md-search__input:hover,
.md-search__input:focus {
  background-color: transparent;
  border: none;
  outline: none;
  box-shadow: none;
}

.md-search__icon {
  color: var(--dt-text-muted);
}

[data-md-color-scheme="slate"] .md-search__form {
  background-color: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.1);
}

[data-md-color-scheme="slate"] .md-search__input {
  color: #ededed;
}

[data-md-color-scheme="slate"] .md-search__input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

[data-md-color-scheme="slate"] .md-search__icon {
  color: rgba(255, 255, 255, 0.5);
}

/* ============================================
   Footer
   ============================================ */
.md-footer {
  margin-top: 3rem;
}

.md-footer-meta {
  background-color: var(--md-footer-bg-color--dark);
}

/* ============================================
   Scrollbar (Dark theme only)
   ============================================ */
[data-md-color-scheme="slate"] ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-track {
  background: #1e1e1e;
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb {
  background: #383837;
  border-radius: 4px;
}

[data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb:hover {
  background: #444444;
}

/* ============================================
   Animations & Transitions
   ============================================ */
a,
.md-nav__link,
.md-button,
.md-tabs__link {
  transition: all 0.2s ease;
}

/* Link hover effect similar to GUI */
.md-typeset a:not(.md-button):not(.headerlink):not(.quick-link) {
  position: relative;
  text-decoration: none;
}

.md-typeset a:not(.md-button):not(.headerlink):not(.quick-link)::after {
  content: '';
  position: absolute;
  width: 0;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: currentColor;
  transition: width 0.3s ease-in-out;
}

.md-typeset a:not(.md-button):not(.headerlink):not(.quick-link):hover::after {
  width: 100%;
}

/* ============================================
   Content Width
   ============================================ */
.md-content {
  max-width: 900px;
}

/* ============================================
   Quick Links (Navigation Cards)
   ============================================ */
.quick-links {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.quick-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--md-default-bg-color--light);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 0.5rem;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.quick-link:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.quick-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(59, 206, 172, 0.1);
  border-radius: 0.375rem;
  color: var(--md-accent-fg-color);
  flex-shrink: 0;
}

.quick-link-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.quick-link-content strong {
  font-size: 0.95rem;
  color: var(--md-default-fg-color);
}

.quick-link-content span {
  font-size: 0.85rem;
  color: var(--md-default-fg-color--light);
}

.quick-link-arrow {
  color: var(--md-default-fg-color--lighter);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.quick-link:hover .quick-link-arrow {
  transform: translateX(3px);
  color: var(--md-accent-fg-color);
}

/* Dark mode */
[data-md-color-scheme="slate"] .quick-link {
  background: rgba(255, 255, 255, 0.03);
}

[data-md-color-scheme="slate"] .quick-link:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* ============================================
   Theme-aware images (#only-dark / #only-light)
   Hide dark images in light theme, light images in dark theme.
   JS in theme-toggle.js also enforces this when theme changes.
   ============================================ */
html[data-md-color-scheme="default"] .md-typeset img[src*="#only-dark"],
html[data-md-color-scheme="default"] .md-typeset img[src*="-dark.png"] {
  display: none !important;
}

html[data-md-color-scheme="slate"] .md-typeset img[src*="#only-light"],
html[data-md-color-scheme="slate"] .md-typeset img[src*="-light.png"] {
  display: none !important;
}

/* ============================================
   Custom Environment Badges
   ============================================ */
.env-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: var(--dt-radius);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.env-badge.prod {
  background-color: rgba(55, 202, 168, 0.15);
  color: var(--dt-env-prod);
  border: 1px solid var(--dt-env-prod);
}

.env-badge.pre {
  background-color: rgba(237, 189, 107, 0.15);
  color: var(--dt-env-pre);
  border: 1px solid var(--dt-env-pre);
}

.env-badge.dev {
  background-color: rgba(106, 151, 236, 0.15);
  color: var(--dt-env-dev);
  border: 1px solid var(--dt-env-dev);
}

.env-badge.system {
  background-color: rgba(122, 132, 144, 0.15);
  color: var(--dt-env-system);
  border: 1px solid var(--dt-env-system);
}

/* ============================================
   Mermaid Diagrams
   ============================================ */

/* General spacing */
.mermaid {
  margin: 1.5rem 0;
}

/* Rounded rectangle nodes */
.mermaid .node rect {
  rx: 8px;
  ry: 8px;
}

/* ---- Dark Mode Overrides ---- */

/* Node shapes: dark teal background with teal border */
[data-md-color-scheme="slate"] .mermaid .node rect,
[data-md-color-scheme="slate"] .mermaid .node circle,
[data-md-color-scheme="slate"] .mermaid .node ellipse,
[data-md-color-scheme="slate"] .mermaid .node polygon,
[data-md-color-scheme="slate"] .mermaid .node .label-container {
  fill: #253330 !important;
  stroke: #3bceac !important;
}

/* Start/end marker circles */
[data-md-color-scheme="slate"] .mermaid .node .state-start,
[data-md-color-scheme="slate"] .mermaid .node .start-node circle {
  fill: #3bceac !important;
  stroke: #3bceac !important;
}

/* All SVG text elements */
[data-md-color-scheme="slate"] .mermaid text {
  fill: #ededed !important;
}

/* HTML labels inside foreignObject (nodeLabel, edge labels, etc.) */
[data-md-color-scheme="slate"] .mermaid .nodeLabel,
[data-md-color-scheme="slate"] .mermaid .label div,
[data-md-color-scheme="slate"] .mermaid foreignObject div {
  color: #ededed !important;
}

/* Edge label containers */
[data-md-color-scheme="slate"] .mermaid .edgeLabel {
  background-color: #2c2c2c !important;
}

[data-md-color-scheme="slate"] .mermaid .edgeLabel rect {
  fill: #2c2c2c !important;
  opacity: 1 !important;
}

[data-md-color-scheme="slate"] .mermaid .edgeLabel span,
[data-md-color-scheme="slate"] .mermaid .edgeLabel p {
  color: #ededed !important;
  background: transparent !important;
}

/* Edge paths / lines */
[data-md-color-scheme="slate"] .mermaid .edgePath path,
[data-md-color-scheme="slate"] .mermaid .flowchart-link {
  stroke: #6a97ec !important;
}

/* Arrow markers */
[data-md-color-scheme="slate"] .mermaid marker path {
  fill: #6a97ec !important;
  stroke: #6a97ec !important;
}

/* Clusters / subgraphs */
[data-md-color-scheme="slate"] .mermaid .cluster rect {
  fill: rgba(59, 206, 172, 0.06) !important;
  stroke: rgba(59, 206, 172, 0.25) !important;
}

[data-md-color-scheme="slate"] .mermaid .cluster text,
[data-md-color-scheme="slate"] .mermaid .cluster span {
  color: #ededed !important;
  fill: #ededed !important;
}

/* Title text */
[data-md-color-scheme="slate"] .mermaid .titleText {
  fill: #ededed !important;
}

/* Sequence diagram specifics */
[data-md-color-scheme="slate"] .mermaid .actor {
  fill: #253330 !important;
  stroke: #3bceac !important;
}

[data-md-color-scheme="slate"] .mermaid .actor-line {
  stroke: #6a97ec !important;
}

[data-md-color-scheme="slate"] .mermaid .messageLine0,
[data-md-color-scheme="slate"] .mermaid .messageLine1 {
  stroke: #6a97ec !important;
}

[data-md-color-scheme="slate"] .mermaid .messageText {
  fill: #ededed !important;
}

[data-md-color-scheme="slate"] .mermaid .labelBox {
  fill: #2c2c2c !important;
  stroke: #3bceac !important;
}

[data-md-color-scheme="slate"] .mermaid .labelText,
[data-md-color-scheme="slate"] .mermaid .loopText {
  fill: #ededed !important;
}

/* Gantt chart specifics */
[data-md-color-scheme="slate"] .mermaid .section0,
[data-md-color-scheme="slate"] .mermaid .section1 {
  fill: #253330 !important;
}

[data-md-color-scheme="slate"] .mermaid .task {
  fill: #253330 !important;
  stroke: #3bceac !important;
}

[data-md-color-scheme="slate"] .mermaid .taskText {
  fill: #ededed !important;
}

/* Class diagram specifics */
[data-md-color-scheme="slate"] .mermaid .classGroup rect {
  fill: #253330 !important;
  stroke: #3bceac !important;
}

[data-md-color-scheme="slate"] .mermaid .classGroup text,
[data-md-color-scheme="slate"] .mermaid .classLabel .label {
  fill: #ededed !important;
  color: #ededed !important;
}

[data-md-color-scheme="slate"] .mermaid .relation {
  stroke: #6a97ec !important;
}

/* State diagram specifics */
[data-md-color-scheme="slate"] .mermaid .stateGroup rect,
[data-md-color-scheme="slate"] .mermaid .statediagram-state rect {
  fill: #253330 !important;
  stroke: #3bceac !important;
}

[data-md-color-scheme="slate"] .mermaid .stateGroup text,
[data-md-color-scheme="slate"] .mermaid .statediagram-state text {
  fill: #ededed !important;
}

[data-md-color-scheme="slate"] .mermaid .stateGroup .composit rect {
  fill: rgba(59, 206, 172, 0.06) !important;
}

/* ============================================
   Mobile Responsiveness
   ============================================ */
@media screen and (max-width: 76.1875em) {
  .grid.cards ul {
    grid-template-columns: 1fr;
  }
}