.gallery {
  box-sizing: border-box;
  margin-bottom: 1.5em
}
 
.gallery span {
  color: #777777;
  font-size: 1.5em;
  text-align: center;
  display: block;
}

/* Button Grid */
.button-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
}

.grid-button {
  padding: 6px;
  font-size: 12px;
  border: 1px solid;
  background-color: white;
  transition: background-color 0.2s ease;
}

/* Button Colors */
.button-gray {
  color: #4a4a4a; 
  border: 1px solid #4a4a4a; 
  background-color: #e5e5e5;
}

.button-gray:hover {
  background-color: #cccccc; 
  color: #3e3e3e; 
}

.button-gray:active {
  background-color: #b8b8b8; 
  color: #3e3e3e; 
}

.button-red {
  color: #c95151;
  border-color: #c95151;
  background-color: #fbe7e7;
}

.button-red:hover,
.button-red:focus {
  background-color: #f1d0d3;
  color: #b95460;
}

.button-red:active {
  background-color: #eac0c3;
  color: #b95460;
}

.button-yellow {
  color: #b3a149;
  border-color: #b3a149;
  background-color: #fdf9e7;
}

.button-yellow:hover,
.button-yellow:focus {
  background-color: #f2efc9;
  color: #afa452;
}

.button-yellow:active {
  background-color: #ebe6ab;
  color: #afa452;
}

.button-blue {
  color: #4c96b3;
  border-color: #4c96b3;
  background-color: #e7f3f7;
}

.button-blue:hover,
.button-blue:focus {
  background-color: #d3e7eb;
  color: #4d92a3;
}

.button-blue:active {
  background-color: #c1dce1;
  color: #4d92a3;
}

.button-orange {
  color: #c97f51;
  border-color: #c97f51;
  background-color: #fbefe7;
}

.button-orange:hover,
.button-orange:focus {
  background-color: #eed4c8;
  color: #9e7052;
}

.button-orange:active {
  background-color: #e5bba7;
  color: #9e7052;
}

.button-green {
  color: #6fb363;
  border-color: #6fb363;
  background-color: #edf7eb;
}

.button-green:hover,
.button-green:focus {
  background-color: #d4e8ce;
  color: #619e55;
}

.button-green:active {
  background-color: #c0dcb6;
  color: #619e55;
}

.button-purple {
  color: #885cac;
  border-color: #885cac;
  background-color: #f0e7f4;
}

.button-purple:hover,
.button-purple:focus {
  background-color: #e2d1e8;
  color: #794e98;
}

.button-purple:active {
  background-color: #d3b9db;
  color: #794e98;
}

.gallery-wrapper {
  width: 100%;
  box-sizing: border-box;
}

/* Gallery Layout */
.gallery-container {
  opacity: 0;
  transition: opacity 0.5s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.main-image-container {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 12px;
  aspect-ratio: 16 / 9;
  width: 100%;
}

#mainImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Thumbnail Grid */
.thumbnailContainer {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  width: 100%;
}

.thumbnail {
  aspect-ratio: 16 / 9;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.2s ease;
}

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

.thumbnail:hover {
  transform: scale(1.05);
}

.thumbnail.selected {
  outline: 2px solid #379cd2;
}

/* Responsive Design */
@media (max-width: 768px) {
  .thumbnailContainer {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .button-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}