.row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Выравнивание элементов по центру */
  }
  
  .custom-col {
    padding: 0;
    margin: 15px;
    flex: 0 0 calc(33.3333% - 30px); /* Ширина колонки */
    max-width: calc(33.3333% - 30px);
  }
  
  .custom-card {
    overflow: hidden;
  }
  
  .custom-img-container {
    position: relative;
    width: 100%;
    text-align: center;
    border: 1px solid #ddd;
  }
  
  .custom-card-img-top {
    width: 100%;
    height: auto;
  }
  
  .custom-line {
    height: 2px; /* Установка желаемой толщины линии */
    background-color: #000;
    width: 100%; /* Ширина линии равна ширине контейнера изображения */
    margin-top: -2px;
    box-shadow: 2px 2px 4px 0 rgba(0,0,0,.6);
  }
  
  
  .custom-card-title, .custom-part-of-the-world, .custom-capital {
    padding: 0.05rem 1rem;
    text-align: center;
    margin: 5px 0; /* Уменьшаем отступы между строками */
  }
  
  .custom-card-title {
    font-size: 1.2rem; /* Увеличиваем размер шрифта для столицы */
  }

  .custom-part-of-the-world, .custom-capital {
    font-size: 0.9rem;
  }

  @media screen and (max-width: 768px) {
    .custom-col {
      flex: 0 0 100%;
      max-width: 100%;
    }
  
    .row {
      padding: 0 15px; /* Добавляем padding по бокам для контейнера row */
    }
  }