/**
 * Map Section CSS Variables
 * Переменные для компонента карты
 */

:root {
  /* Colors */
  --map-color-primary: #00AC1D;
  --map-color-text: #fff;
  --map-color-line: #A3A4A6;
  --map-color-line-opacity: 0.3;
  
  /* Typography */
  --map-font-family: "TT Firs Neue", sans-serif;
  --map-font-weight: 400;
  --map-title-size: 36px;
  --map-title-line-height: 1em;
  --map-city-name-size: 24px;
  --map-city-name-line-height: 1.17em;
  
  /* Spacing */
  --map-gap-default: 40px;
  --map-gap-small: 24px;
  --map-gap-tiny: 8px;
  --map-gap-micro: 16px;
  
  /* Layout */
  --map-city-group-width: 365px;
  --map-city-item-height: 64px;
  --map-city-icon-size: 48px;
  --map-marker-size: 48px;
  --map-marker-active-size: 56px;
  
  /* Map dimensions */
  --map-width: 681.23px;
  --map-height: 639px;
  --map-offset-top: -174px;
  
  /* Shadows */
  --map-shadow: drop-shadow(0px 8px 16px -4px rgba(0, 0, 0, 0.64));
  
  /* Transitions */
  --map-transition: transform 0.2s ease;
}
@media (max-width: 769px) {
  :root {
    --map-title-size: 24px;
    --map-city-name-size: 20px;
    
  }
}
@media (max-width: 394px) {
  :root {
    --map-title-size: 24px;
    --map-city-name-size: 18px;
    --map-width: 300px;
    --map-height: 280px;
    --map-offset-top: -370px;
  }
}