.dpg-grid {
  display: grid;
  gap: 20px;
}

.dpg-grid.columns-2 {
  grid-template-columns: repeat(2, 1fr);
}
.dpg-grid.columns-3 {
  grid-template-columns: repeat(3, 1fr);
}
.dpg-grid.columns-4 {
  grid-template-columns: repeat(4, 1fr);
}

.dpg-item {
  aspect-ratio: 3 / 4;
  position: relative;
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.dpg-title {
  z-index: 10;
  text-align: center;
  padding: 10px;
  font-weight: bold;
}

.dpg-image-wrapper {
  position: relative;
  height: 100%;
  cursor: pointer;
  overflow: hidden;
}

.dpg-image {
  height: 100%;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.dpg-image img {
  width: 100%;
  transition: transform 6s ease-out;
  display: block;
}

.dpg-image-wrapper:hover img {
  transform: translateY(-30%);
}

.dpg-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.dpg-image-wrapper:hover .dpg-overlay {
  opacity: 1;
}

.dpg-button {
  padding: 10px 20px;
  border: none;
  cursor: pointer;
  font-weight: bold;
}