/* Grid Layout */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: repeat(5, minmax(100px, auto));
  gap: var(--space-3);
  margin: var(--space-4) 0;
  min-height: 600px;
}

/* Text content area (columns 1-2) */
.text-content {
  grid-column: 1 / 3;
  grid-row: 1 / 6;
  overflow-y: auto;
  padding-right: var(--space-2);
}

.text-container {
  height: 100%;
  padding: var(--space-2);
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  box-shadow: 0 4px 20px var(--color-shadow);
}

/* Main image area (columns 3-4) */
.main-image-container {
  grid-column: 3 / 7;
  grid-row: 1 / 6;
  position: relative;
}

.main-image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 8px 30px var(--color-shadow);
  transition: transform 0.3s ease;
}

.main-image-wrapper:hover {
  transform: scale(1.01);
}

#main-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: all 0.5s ease;
  aspect-ratio: 2/3;
}

/* Thumbnails area (column 5) */
.thumbnails-container {
  grid-column: 7 / 8;
  grid-row: 1 / 6;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  overflow-y: auto;
  padding-left: var(--space-1);
}

.thumbnail {
  position: relative;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 10px var(--color-shadow);
  transition: all 0.3s ease;
  aspect-ratio: 2/3;
}

.thumbnail::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.thumbnail:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px var(--color-shadow);
}

.thumbnail:hover::before {
  opacity: 1;
}

.thumbnail.active {
  box-shadow: 0 0 0 3px var(--color-accent), 0 4px 15px var(--color-shadow);
}

.thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}