.jobs-container {
  padding: 20px;
}

.jobs-title {
  color: #0055aa;
  margin-bottom: 15px;
}

.jobs-subtitle {
  color: #333;
  margin-top: 20px;
}

.jobs-list {
  list-style: none;
  padding: 0;
}

.jobs-list li {
  background: #fff;
  border: 1px solid #ccc;
  margin: 10px 0;
  padding: 10px;
  border-radius: 4px;
}

.job-links {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}

.btn {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: bold;
  color: #fff;
}

.btn-view {
  background: #0055aa;
}

.btn-download {
  background: #28a745;
}

.btn-log {
  background: #17a2b8;
}

.image-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.image-item {
  text-align: center;
  border: 1px solid #ccc;
  padding: 10px;
  background: #fff;
  width: 220px;
  border-radius: 4px;
}

.image-item img {
  display: block;
  margin: 0 auto 5px auto;
  max-height: 200px;   /* обмеження по висоті */
  height: auto;        /* висота фіксується */
  width: auto;         /* ширина пропорційна */
  object-fit: contain; /* картинка вписується без обрізання */
}

.image-name {
  font-size: 14px;
  color: #333;
  word-wrap: break-word;
}

.user-info {
  margin-top: 6px;
  background: #f9f9f9;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 4px; /* менший відступ */
  font-size: 12px; /* компактний текст */
}

.user-info summary {
  cursor: pointer;
  font-weight: bold;
  color: #0055aa;
  font-size: 13px; /* трохи більший заголовок */
}

.user-info ul {
  margin: 4px 0 0 12px;
  padding: 0;
  list-style: disc;
}

.user-info li {
  margin: 2px 0;
  font-size: 12px;
  line-height: 1.3; /* щільніше */
}