/* Стилі для контейнера з малюнками */
.table-container2 {
  display: flex;
  flex-wrap: wrap; 
  justify-content: center; 
  align-items: center; 
  gap: 1.5rem; 
  padding: 1rem;
  width: 100%; 
  box-sizing: border-box;
}

/* Стилі для кожного блоку-обгортки зображення */
.table-block {
  /* Задаємо фіксовану ширину та висоту для блоку */
  width: 200px; 
  height: 100px;
  
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  overflow: hidden; 
  background-color: #f9f9f9;
  
  /* Використовуємо flexbox для центрування зображення */
  display: flex;
  justify-content: center;
  align-items: center;
  /* Забороняємо стискання та розтягування, щоб зберегти фіксовані розміри */
  flex-shrink: 0;
  flex-grow: 0;
}

/* Стилі для самих зображень */
.table-block img {
  /* Задаємо максимальні розміри, щоб зображення не перевищувало розміри контейнера */
  max-width: 100%; 
  max-height: 100%;
  
  /* Ключова зміна: Зменшує зображення, щоб воно повністю помістилося без обрізання. */
  object-fit: contain; 
  
  display: block; 
}

/* Ефект при наведенні курсора */
.table-block a:hover img {
  transform: scale(1.05);
}