.grid-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 30px 0;
}
.grid-item {
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease;
}
.grid-item:hover {
  transform: scale(1.03);
}


.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
  justify-content: center;
  margin: 30px 0;
}
.image-card {
  width: 300px;
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  transition: all 0.4s ease;
}
.image-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}
.card-img {
  width: 100%;
  height: 200px;
  -o-object-fit: cover;
     object-fit: cover;
}
.card-content {
  padding: 20px;
}
.card-title {
  margin: 0 0 10px 0;
  color: #2c3e50;
  font-size: 1.2rem;
}
.card-desc {
  color: #7f8c8d;
  line-height: 1.5;
  margin: 0;
}


.responsive-group {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin: 25px 0;
}
.responsive-img {
  flex: 1 1 calc(25% - 15px);
  max-width: calc(25% - 15px);
  height: 180px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 8px;
  transition: all 0.3s ease;
}
.responsive-img:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}
@media (max-width: 1024px) {
.responsive-img { flex: 1 1 calc(33.333% - 15px); max-width: calc(33.333% - 15px);
}
}
@media (max-width: 768px) {
.responsive-img { flex: 1 1 calc(50% - 15px); max-width: calc(50% - 15px);
}
}
@media (max-width: 480px) {
.responsive-img { flex: 1 1 100%; max-width: 100%;
}
}


.masonry-grid {
  -moz-column-count: 3;
       column-count: 3;
  -moz-column-gap: 20px;
       column-gap: 20px;
  margin: 30px 0;
}
.masonry-item {
  -moz-column-break-inside: avoid;
       break-inside: avoid;
  margin-bottom: 20px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
}
.masonry-item:hover {
  transform: translateY(-5px);
}
.masonry-img {
  width: 100%;
  height: auto;
  display: block;
}
.masonry-caption {
  padding: 12px;
  background: white;
  font-size: 0.9rem;
  color: #666;
}
@media (max-width: 768px) {
.masonry-grid { -moz-column-count: 2; column-count: 2;
}
}
@media (max-width: 480px) {
.masonry-grid { -moz-column-count: 1; column-count: 1;
}
}