.map-section {
  padding: 110px 0;
  display: flex;
  flex-direction: column;
  align-items: center;

  &__categories {
    margin-bottom: 60px;
    display: flex;
    gap: 90px;

    ul {
      display: flex;
      flex-direction: column;
      gap: 22px;

      li {
        display: flex;
        align-items: center;
        gap: 20px;

        font-size: 18px;
        line-height: 22px;
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .map-section {
    &__categories {
      margin-bottom: 40px;

      gap: 25px;
    }
  }
}

@media screen and (max-width: 550px) {
  .map-section {
    &__categories {
      margin-bottom: 25px;

      padding: 0 16px;
      width: 100%;
      align-items: flex-start;
      flex-direction: column;
    }
  }
}
