body {
    margin: 0;
    padding: 0;
      background: #e6e6e6;
}

button {
    border-radius: 12px;
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

#pagination {
    text-align: center;
    margin-top: 20px;
}

#prev-page, #next-page {
    padding: 10px 20px;
    margin: 0 10px;
}


#video-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Выравнивание контейнера слева */
    justify-content: space-evenly;
    align-content: flex-start; /* Выравнивание контейнера сверху */
    gap: 10px; /* Расстояние между видео */
}

/* Стили для отдельного видео */
#video-container > div {
    flex: 1; /* Равномерное распределение пространства между видео */
    max-width: calc(33.33% - 10px); /* Максимальная ширина для 3 видео в ряду */
    margin-bottom: 10px;
}


#city_name{
    text-align: center;
    color: #8e1c14;
}

#map {
    z-index: 3;
 position: absolute;
  top: 92px;
  bottom: 92px;
  width: 100%;
}
#header {
    height: 90px; /* Высота слоя */
    background: #e6e6e6; 
    border-bottom: 2px solid #7B5427;
   }
   #header h3 {
    text-align: center;
    color: #8e1c14;
    padding: 10px;
     margin: 0; 
    }
#foo {
    position: fixed; /* Фиксированное положение */
    left: 0; bottom: 0; /* Левый нижний угол */
    height: 90px; /* Высота слоя */
     width: 100%; 
     padding-left: 30px;
/*     padding-right: 30px;*/
    background: #e6e6e6; 
    border-top: 2px solid #7B5427;
   }
    #foo div#l_foo_text {
        position: absolute;
     width: 50%; 
   }
   #foo div#r_foo_text {
    position: absolute;
     right: 0; bottom: 0; /* Правый нижний угол */
     padding-right: 50px;
   }

   #foo h4#red  {
    color: #8e1c14;
    margin-bottom: 0;
   }
 #foo h4#green  {
    color: #1a4211;
    margin-top: 0;
   }