:root {
  /* ============================================================================
     COLOR SYSTEM
     ============================================================================ */

  /* Primary Text Colors
     Used for: Main body text, headings, primary content
     Files: All CSS files for text content */
  --color-ink: #0f172a;
  --color-text-primary: #0f172a;

  /* Muted/Secondary Text Colors
     Used for: Secondary information, labels, descriptions, help text
     Files: auth_style.css, reservations.css, about.css, explore_bottom_sheet.css */
  --color-extra-muted: #99a1b0;
  --color-muted: #6b7280;
  --color-text-secondary: #6b7280;
  --color-text-tertiary: #666;

  /* Brand & Interactive Colors
     Used for: Primary buttons, links, active states, brand elements
     Files: All files with interactive elements (buttons, links, navigation) */
  --color-primary: #295e9b;
  --color-primary-hover: #1e4a7a;
  --color-primary-light: rgb(41 94 155 / 12%);
  --color-primary-border: rgb(41 94 155 / 80%);
  --color-secondary: #3f6ea7;

  /* Header/Navigation Brand Color
     Used for: App header background, primary navigation
     Files: app_header.css, landing_style.css */
  --color-header-bg: rgb(241 56 99 / 60%);
  --color-header-text: #fff;

  /* icon Baackgroun Colours
     Used for: App header background, primary navigation
     Files: app_header.css, landing_style.css */
   --lcs-red: #ee3048;
   --lcs-purple: #262262;
   --lcs-blue: #295e9b;
   --lcs-teal: #00a79d;
   --lcs-green: #2bb673;
   --lcs-yellow: #f7941d;


  /* Surface & Background Colors
     Used for: Cards, modals, panels, page backgrounds
     Files: All files with card/panel components */
  --color-surface: #fff;
  --color-background: #f7f8fb;
  --color-background-hover: #eef2f7;
  --color-background-secondary: #f9fbff;
  --color-background-dark: #f2f4f8;
  --color-background-light: #fcfdff;


  /* Border Colors
     Used for: Card borders, input borders, dividers
     Files: All files with bordered elements */
  --color-border: #e3e8ef;
  --color-border-light: #eee;

  /* State Colors - Success
     Used for: Success messages, confirmed states, positive actions
     Files: auth_style.css, reservations.css, form-components.css */
  --color-success: #16a34a;
  --color-success-bg: #d4edda;
  --color-success-text: #155724;
  --color-success-border: #c3e6cb;

  /* State Colors - Error/Danger
     Used for: Error messages, validation errors, delete actions
     Files: auth_style.css, reservations.css, form-components.css */
  --color-error: #dc2626;
  --color-error-bg: #f8d7da;
  --color-error-text: #721c24;
  --color-error-border: #f5c6cb;
  --color-danger: #c62828;
  --color-danger-hover: #9a0007;
  --color-danger-dark: #c53030;

  /* State Colors - Warning
     Used for: Warning messages, pending states, caution indicators
     Files: auth_style.css, reservations.css, booking_mode.css */
  --color-warning: #f39c12;
  --color-warning-bg: #fff3cd;
  --color-warning-text: #856404;
  --color-warning-border: #ffeeba;

  /* State Colors - Info
     Used for: Informational messages, helper text
     Files: auth_style.css, toast.css */
  --color-info: #0ea5e9;
  --color-info-bg: #d1ecf1;
  --color-info-text: #0c5460;
  --color-info-border: #bee5eb;

  /* Interactive Element Colors
     Used for: Buttons, links, clickable elements
     Files: app_header.css, booking_mode.css, explore_mode.css */
  --color-button-label: #919191;
  --color-field-desc-text: #fff;
  --color-button-secondary-bg: #eef2f7;
  --color-button-secondary-text: #0f172a;

  /* Overlay & Shadow Colors
     Used for: Modal overlays, dimming effects, shadows
     Files: booking_mode.css, explore_mode.css, landing_style.css */
  --color-overlay: rgb(0 0 0 / 55%);
  --color-overlay-light: rgb(0 0 0 / 50%);
  --color-dim: rgb(0 0 0 / 70%);

  /* Special UI Colors
     Used for: Specific UI elements with unique color requirements
     Files: explore_bottom_sheet.css, map_style.css */
  --color-chevron: #333;
  --color-chevron-secondary: #4b5563;

  /* Map UI Colors
     Used for: Specific POI Map UI elements with unique color requirements
     Files: explore_bottom_sheet.css, map_style.css */
  --poi-container-bg: rgb(0 0 0 / 50%);

/* ============================================================================
     FLUID SPACING SYSTEM (Proportional to --text-md = 0.8rem @ 375px)
     ============================================================================ */

  /* Core Spacing Scale 
     Min Viewport: 320px | Max Viewport: 1200px
     Mobile Shrink Factor: ~56.9% of desktop size at 375px
  */
  --space-xs: clamp(0.20rem, 0.14rem + 0.31vw, 0.375rem);
  --space-sm: clamp(0.40rem, 0.28rem + 0.63vw, 0.75rem);
  --space-md: clamp(0.8rem, 0.37rem + 0.84vw, 1.00rem);
  --space-lg: clamp(0.81rem, 0.56rem + 1.25vw, 1.50rem);
  --space-xl: clamp(1.22rem, 0.84rem + 1.88vw, 2.25rem);
  --space-2xl: clamp(1.89rem, 1.30rem + 2.93vw, 3.50rem);
  --space-3xl: clamp(2.97rem, 2.05rem + 4.60vw, 5.50rem);

  /* Component-Specific Spacing */
  --space-input-padding: 0.75em 1.2em; 
  --space-button-padding: 0.6em 1.1em;

/* ============================================================================
     FLUID TYPOGRAPHY SYSTEM
     ============================================================================ */
  
  /* Font Families */
  --font-family-base: "Bahnschrift SemiLight", "Bahnschrift", "Segoe UI", sans-serif;
  --font-family-display: "Bahnschrift", "Segoe UI", sans-serif;
  --font-family-monospace: monospace;

  /* Harmonized Fluid Type Scale 
     Min Viewport: 320px | Max Viewport: 1200px
     Mobile Ratio: 1.15  | Desktop Ratio: 1.25
  */
--text-xs: clamp(0.8rem, 0.37rem + 0.67vw, 0.875rem);
--text-sm: clamp(0.85rem, 0.43rem + 0.76vw, 1.00rem);
--text-base: clamp(.8rem, 0.51rem + 0.82vw, 1.125rem);
--text-md: clamp(0.95rem, 0.52rem + 1.18vw, 1.48rem);
--text-lg: clamp(1rem, 0.54rem + 1.63vw, 1.3rem);
--text-xl: clamp(1.05rem, 0.54rem + 2.21vw, 1.63rem);
--text-2xl: clamp(1.2rem, 0.53rem + 2.96vw, 1.87rem);
--text-3xl: clamp(1.5rem, 0.60rem + 3.50vw, 2.33rem);


  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* Line Heights */
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;
  --line-height-loose: 1.75;

  /* Letter Spacing */
  --letter-spacing-tight: 0.02em;
  --letter-spacing-normal: 0.04em;

  /* ============================================================================
     BORDER RADIUS SYSTEM
     ============================================================================ */

  /* Border Radius Scale
     Used for: Consistent rounding across cards, buttons, inputs, modals
     Files: All CSS files with rounded elements */
  --radius-sm: clamp(0.14rem, 0.09rem + 0.20vw, 0.25rem); /* 4px max */
  --radius-md: clamp(0.27rem, 0.19rem + 0.41vw, 0.50rem); /* 8px max */
  --radius-lg: clamp(0.34rem, 0.24rem + 0.51vw, 0.625rem); /* 10px max */
  --radius-xl: clamp(0.41rem, 0.29rem + 0.62vw, 0.75rem); /* 12px max */
  --radius-2xl: clamp(0.48rem, 0.33rem + 0.72vw, 0.875rem); /* 14px max */
  --radius-3xl: clamp(0.55rem, 0.38rem + 0.82vw, 1.00rem); /* 16px max */
  --radius-6xl: clamp(2rem, 0.43rem + 0.92vw, 4rem); 
  --radius-pill: 20px; /* Pill-shaped buttons, badges */
  --radius-full: 9999px; /* Circular elements, avatar */

  /* Component-Specific Radius
     Used for: Specific UI patterns */
  --radius-sheet-top: var(--radius-3xl) var(--radius-3xl) 0 0; /* Used in: explore_bottom_sheet.css */

  /* ============================================================================
     SHADOW SYSTEM
     ============================================================================ */

  /* Core Shadows - Light Elevation
     Used for: Subtle elevation, cards, inputs
     Files: All files with elevated elements */
  --shadow-xs: inset 0 1px 0 rgb(255 255 255 / 60%);
  --shadow-sm: 0 1px 2px rgb(15 23 42 / 5%);
  --shadow-md: 0 4px 6px rgb(15 23 42 / 10%);

  /* Core Shadows - Medium Elevation
     Used for: Dropdowns, popovers, floating elements
     Files: app_header.css, booking_mode.css, explore_mode.css */
  --shadow-lg: 0 12px 40px rgb(15 23 42 / 12%);
  --shadow-xl: 0 12px 32px rgb(15 23 42 / 18%);
  --shadow-2xl: 0 14px 40px rgb(15 23 42 / 18%);

  /* Core Shadows - High Elevation
     Used for: Modals, overlays, important UI
     Files: shared_popup.css, booking_mode.css */
  --shadow-3xl: 0 20px 40px rgb(15 23 42 / 25%);
  --shadow-overlay:
    0 20px 40px rgb(15 23 42 / 25%), 0 8px 16px rgb(15 23 42 / 15%);

  /* Special Shadows
     Used for: Specific visual effects */
  --shadow-header: 0 8px 20px rgb(15 23 42 / 6%); /* Used in: app_header.css */
  --shadow-fab: 0 10px 30px rgb(15 23 42 / 18%); /* Used in: explore_bottom_sheet.css (FAB) */
  --shadow-bottom-sheet: 0 -4px 20px rgb(0 0 0 / 15%); /* Used in: explore_bottom_sheet.css */
  --shadow-tooltip: 0 8px 16px rgb(41 94 155 / 35%); /* Used in: explore_mode.css */
  --shadow-focus: 0 0 0 3px rgb(41 94 155 / 12%); /* Used in: form-components.css */

  /* Text Shadows (for landing page effects)
     Used for: Dramatic text effects on video backgrounds
     Files: landing_style.css */
  --text-shadow-glow:
    5px 5px 10px rgb(0 0 0 / 70%), -5px -5px 10px rgb(255 255 255 / 30%);

  /* ============================================================================
     TRANSITION SYSTEM
     ============================================================================ */

  /* Duration
     Used for: Animation and transition timing
     Files: All CSS files with transitions */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-medium: 250ms ease;
  --transition-slow: 300ms ease;

  /* Specific Transition Properties
     Used for: Common animation patterns */
  --transition-transform: transform 0.15s ease;
  --transition-opacity: opacity 0.3s ease;
  --transition-all: all 0.15s ease;
  --transition-background: background 0.15s ease;
  --transition-color: color 150ms ease;
  --transition-shadow: box-shadow 0.15s ease;

  /* Interaction Timeout Durations
     Used for: Mobile menu timeout, auto-hide behaviors
     Files: landing.js */
  --duration-mobile-menu-timeout: 4000ms;

  /* ============================================================================
     Z-INDEX SYSTEM
     ============================================================================ */

  /* Z-Index Layering
     Used for: Consistent stacking order across overlays and modals
     Files: All files with positioned elements */
  --z-base: 0;
  --z-header: 1000; /* App header - always on top of content */
  --z-bottom-sheet: 1040; /* Bottom sheet panels */
  --z-dropdown: 1250; /* Dropdowns, tooltips */
  --z-modal: 1300; /* Modal overlays (account, auth) */
  --z-popup: 2100; /* POI popups, detail views */
  --z-lightbox: 2500; /* Image zoom lightbox */
  --z-alert-modal: 3000; /* Alert/message modals - above all popups */
  --z-toast: 9999; /* Toast notifications - highest */
  --z-menu-tooltip: 700; /* Menu tooltips */

  /* ============================================================================
     LAYOUT DIMENSIONS
     ============================================================================ */

  /* Header & Navigation
     Used for: Consistent header sizing across views
     Files: app_header.css, auth_style.css, landing_style.css */
  --header-height: 55px;

  /* Interactive Element Sizes
     Used for: Minimum touch targets, consistent sizing
     Files: All files with interactive elements */
  --size-touch-target: 44px; /* Minimum touch target for accessibility */
  --size-button-height: 44px; /* Standard button height */
  --size-input-height: 44px; /* Standard input height */
  --size-icon-sm: 20px; /* Small icons */
  --size-icon-md: 32px; /* Medium icons */
  --size-icon-lg: 48px; /* Large icons */
  --size-section-icon: clamp(2.5rem, 0.9rem + 1.5vw, 3.5rem); /* Section accordion icon */

  /* POI Icon Sizes
     Used for: Map POI markers with background containers
     Files: map_style.css, ExploreMode.js */
  --size-poi-container: 56px; /* POI marker container size */
  --size-poi-icon: calc(
    var(--size-poi-container) * 0.6
  ); /* Icon size (60% of container) */

  /* Campsite Marker Sizes
     Used for: Booking mode campsite markers with teardrop backgrounds
     Files: booking_mode.css, BookingMode.js */
  --size-campsite-marker: 36px; /* Campsite marker container size (teardrop) */
  --size-campsite-icon: calc(
    var(--size-campsite-marker) * 0.8
  ); /* Icon size (60% of marker) */

  --offset-campsite-icon-y: calc(
    var(--size-campsite-marker) * 0
  ); /* Vertical offset (-15px for 40px marker) */

  --offset-campsite-icon-fine-y: -2px; /* Fine-tune vertical position */

  /* Container Widths
     Used for: Content max-widths, responsive layouts
     Files: about.css, reservations.css, app_header.css */
  --width-content-sm: 480px; /* Small content containers */
  --width-content-md: 1080px; /* Medium content containers */
  --width-content-lg: 1200px; /* Large content containers */
  --width-content-max: 94vw; /* Maximum responsive width */

  /* Panel & Sheet Widths
     Used for: Side panels, bottom sheets, modals
     Files: explore_bottom_sheet.css, booking_mode.css */
  --width-panel: 320px;
  --width-panel-max: 20vw;

  /* ============================================================================
     BORDER SYSTEM
     ============================================================================ */

  /* Border Widths
     Used for: Consistent border sizing
     Files: All files with borders */
  --border-thin: 1px;
  --border-medium: 2px;
  --border-thick: 4px;

  /* ============================================================================
     BACKDROP FILTERS
     ============================================================================ */

  /* Glassmorphism Effects
     Used for: Frosted glass effects on headers and overlays
     Files: app_header.css */
  --backdrop-blur: blur(10px);

  /* ============================================================================
     INFO PAGE BACKGROUND MAP
     ============================================================================ */

  /* Map Background Settings
     Used for: Info page fixed map background
     Files: info.css, info.html */
  --info-map-zoom: 18; /* Zoom level for background map */
  --info-map-opacity: 1; /* Opacity of map background (0-1) */
  --info-map-center-lat: 49.70536; /* Map center latitude */
  --info-map-center-lng: -117.57189; /* Map center longitude */

  /* ============================================================================
     INTRO ANIMATION
     ============================================================================ */

  /* Intro Animation Settings
     Used for: Intro animation logo and icon sizes
     Files: map_style.css, IntroAnimation.js */
  --intro-logo-size: 200px; /* Main logo container size */
  --intro-icon-size: 75px; /* Cycling icon overlay size */
}

/* ============================================================================
   RESPONSIVE TYPOGRAPHY
   ============================================================================ */

/* Responsive Typography Scale - Mobile */
@media (width <= 768px) {
  :root {
    --ui-font-scale: 0.85;
  }
}

/* ============================================================================
   BUTTON TOKENS
   Comprehensive button system tokens for consistent interactive elements
   Generated: 2025-12-26
   ============================================================================ */

:root {
  /* ----- Base Button Properties ----- */
  --btn-min-height: 2.75em; /* Standard touch target (44px @ 16px base) */

  /* Used by: All buttons */
  --btn-gap: var(--space-sm); /* Gap between icon and text */

  /* Used by: .btn, .explore-btn, .about-btn */
  --btn-gap-compact: 0.375em; /* Smaller gap for compact buttons */

  /* Used by: .explore-btn */

  /* ----- Padding Variants ----- */
  --btn-padding-compact: 0.5em 0.875em; /* Toolbars, tight spaces */

  /* Used by: .explore-btn, .shared-btn, .booking-menu-btn */

  /* Consolidates 3 near-identical values (0.5em, 0.5625em, 0.6em) */
  --btn-padding-default: 0.75em 1.5em; /* Standard interactive buttons */

  /* Used by: .btn, .btn-primary */
  --btn-padding-comfortable: 1em 1.5em; /* Auth forms, prominent CTAs */

  /* Used by: .form-button */
  --btn-padding-pill: 0.625em 1.25em; /* Pill-shaped hero buttons */

  /* Used by: .floating-link */
  --btn-padding-video: 1em 1.5em; /* Video overlay controls */

  /* Used by: .video-control-btn */

  /* ----- Typography ----- */
  --btn-font-default: var(--text-base); /* 16px - standard buttons */
  --btn-font-large: var(--text-md); /* 18px - prominent buttons */
  --btn-font-header: var(--text-lg); /* 20px - navigation */
  --btn-font-weight-default: var(--font-weight-medium);
  --btn-font-weight-semibold: var(--font-weight-semibold);
  --btn-font-weight-bold: var(--font-weight-bold);
  --btn-letter-spacing: 0.01em; /* Subtle letter spacing for buttons */

  /* Used by: .booking-menu-btn, .floating-link */

  /* ----- Border Radius ----- */
  --btn-radius-default: var(--radius-md); /* 6px - most buttons */

  /* Used by: .btn, .btn-primary */
  --btn-radius-rounded: var(--radius-lg); /* 8px - form buttons */

  /* Used by: .form-button */
  --btn-radius-pill: var(--radius-xl); /* 12px+ - account menu, badges */

  /* Used by: .about-btn */
  --btn-radius-full-pill: 1.5em; /* Hero pill button */

  /* Used by: .floating-link */
  --btn-radius-compact: 0.625em; /* Compact button rounding */

  /* Used by: .explore-btn */
  --btn-radius-minimal: 4px; /* Minimal rounding */

  /* Used by: .shared-btn */

  /* ----- Colors: Primary Buttons ----- */
  --btn-primary-bg: var(--color-primary);
  --btn-primary-bg-hover: var(--color-primary-hover);
  --btn-primary-text: var(--color-button-label);
  --btn-primary-border: var(--color-primary-border);

  /* ----- Colors: Secondary Buttons ----- */
  --btn-secondary-bg: var(--color-background-hover);
  --btn-secondary-bg-hover: var(--color-background-dark);
  --btn-secondary-text: var(--color-ink);
  --btn-secondary-border: var(--color-border);

  /* ----- Colors: Outline/Ghost Buttons ----- */
  --btn-outline-bg: transparent;
  --btn-outline-bg-hover: rgb(41 94 155 / 5%);
  --btn-outline-text: var(--color-primary);
  --btn-outline-border: var(--color-primary);

  /* ----- Colors: Danger Buttons ----- */
  --btn-danger-bg: var(--color-danger);
  --btn-danger-bg-hover: var(--color-danger-hover);
  --btn-danger-text: var(--color-button-label);
  --btn-danger-border: var(--color-danger-dark);

  /* ----- Transitions & Effects ----- */
  --btn-transition: var(--transition-all);
  --btn-transition-fast: var(--transition-fast);
  --btn-hover-lift: translateY(-1px); /* Standard hover lift effect */
  --btn-hover-lift-large: translateY(-2px); /* Enhanced lift for hero buttons */

  /* ----- Shadows ----- */
  --btn-shadow-default: var(--shadow-xs);
  --btn-shadow-hover: var(--shadow-md);
  --btn-shadow-large: var(--shadow-xl);
  --btn-shadow-subtle: 0 4px 10px rgb(15 23 42 / 8%); /* Compact button hover */
  --btn-shadow-dark: 0 2px 8px rgb(0 0 0 / 50%); /* Dark shadow for popups */
  --btn-shadow-glow: 0 0 10px var(--color-primary); /* Glowing effect */
  --btn-shadow-fab: 0 4px 14px rgb(0 0 0 / 24%); /* Floating action button */
  --btn-shadow-fab-hover: 0 8px 20px rgb(0 0 0 / 28%); /* FAB hover */

  /* ----- States ----- */
  --btn-disabled-opacity: 0.55;

  /* ----- Context-Specific Tokens (Legacy Preservation) ----- */

  /* These preserve exact current appearance for specialized contexts */

  /* Landing page video controls */
  --btn-video-bg: var(--color-dim);
  --btn-video-bg-hover: rgb(0 0 0 / 90%);
  --btn-video-border-width: var(--border-medium);
  --btn-video-border-color: var(--color-primary);
  --btn-video-text: var(--color-button-label);
  --btn-video-shadow-glow: 0 0 10px var(--color-primary);

  /* Explore mode gradient variants */

  /* CONSOLIDATION CANDIDATE: Consider standardizing to solid colors */
  --btn-explore-gradient-primary: linear-gradient(180deg, #2f6fb3, #295e9b);
  --btn-explore-gradient-secondary: linear-gradient(180deg, #f5f7fb, #e8ecf4);
  --btn-explore-border-opacity: rgb(41 94 155 / 85%);

  /* About page gradient variant */

  /* CONSOLIDATION CANDIDATE: Consider using same as explore or solid color */
  --btn-about-gradient-primary: linear-gradient(
    180deg,
    var(--color-primary),
    var(--color-primary-hover)
  );

  /* Hero CTA gradient (landing page) */

  /* KEEP: Intentional visual differentiation for hero element */
  --btn-hero-gradient: linear-gradient(
    180deg,
    rgb(41 94 155 / 95%),
    rgb(41 94 155 / 82%)
  );
  --btn-hero-gradient-hover: linear-gradient(
    180deg,
    rgb(41 94 155 / 100%),
    rgb(41 94 155 / 90%)
  );

  /* Booking mode variants (dark scheme) */
  --btn-booking-primary-bg: linear-gradient(
    180deg,
    var(--booking-bg-dark),
    var(--booking-bg-dark)
  );
  --btn-booking-primary-text: var(--booking-surface);
  --btn-booking-primary-border: rgb(32 32 32 / 80%);
  --btn-booking-secondary-bg: linear-gradient(
    180deg,
    var(--booking-bg-light),
    var(--booking-bg-light)
  );
  --btn-booking-shadow-hover: 0 6px 14px rgb(15 23 42 / 12%);

  /* Popup close buttons */
  --btn-close-bg: rgb(255 255 255 / 95%);
  --btn-close-bg-hover: rgb(255 255 255 / 100%);
  --btn-close-shadow: 0 2px 8px rgb(0 0 0 / 15%);
  --btn-close-shadow-hover: 0 4px 12px rgb(0 0 0 / 25%);

  /* Floating action buttons */
  --btn-fab-shadow: 0 4px 14px rgb(0 0 0 / 24%);
  --btn-fab-shadow-hover: 0 8px 20px rgb(0 0 0 / 28%);

  /* ============================================================================
     SAFE AREA INSET VARIABLES
     Exposes env() safe-area values as CSS custom properties.
     Requires viewport-fit=cover on the <meta viewport> tag to have effect.
     Used for: Fixed headers/footers on notch/Dynamic Island/home-bar devices.
     Files: app_header.css, any fixed bottom elements.
     ============================================================================ */
  --sat: env(safe-area-inset-top);
  --sar: env(safe-area-inset-right);
  --sab: env(safe-area-inset-bottom);
  --sal: env(safe-area-inset-left);
}

/* ============================================================================
   MOBILE GLOBALS
   Applied once here so individual component CSS files stay clean.
   ============================================================================ */

/* Prevent iOS font size inflation when rotating from portrait to landscape */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Remove 300ms tap delay on all interactive elements.
   Does not disable pinch-zoom — that requires touch-action: none. */
html {
  touch-action: manipulation;
}

/* Suppress the semi-transparent iOS tap flash on links/buttons.
   Keeps custom focus/active styles intact. */
a,
button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"] {
  -webkit-tap-highlight-color: transparent;
}

/* Prevent images from ever escaping their container */
img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}