.spg-gallery-wrap{max-width:1200px;margin:0 auto;padding:20px;}
.spg-filters{margin-bottom:16px;}
.spg-filters .spg-filter{margin-right:10px;padding:8px 12px;border:1px solid #ddd;text-decoration:none;color:#333;border-radius:4px;}
.spg-filters .spg-filter.active{background:#f5f5f5;border-color:#ccc;}
.spg-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
@media (max-width:900px){ .spg-grid{grid-template-columns:repeat(2,1fr);} }
.spg-item{overflow:hidden;position:relative;height:600px;width:500px;max-width:100%;}
.spg-thumb{height:100%;background-position:center center;background-size:cover;position:relative;display:flex;align-items:flex-end;}
.spg-title{width:100%;padding:12px;background:rgba(0,0,0,0.45);color:#fff;font-size:18px;display:flex;justify-content:space-between;align-items:center;}
.spg-title .spg-arrow{margin-left:10px;transform:translateX(0);transition:transform .15s;}
.spg-item:hover .spg-title .spg-arrow{transform:translateX(6px);}
.spg-gallery-wrap {
  width: 90%;
  margin: 50px auto;
}
.spg-filters {
  text-align: center;
  margin-bottom: 30px;
}
.spg-filters a {
  display: inline-block;
  margin: 0 10px;
  text-decoration: none;
  color: #222;
  background: #f0f0f0;
  padding: 8px 16px;
  border-radius: 6px;
  transition: 0.3s;
}
.spg-filters a.active,
.spg-filters a:hover {
  background: #5c0122;
  color: #fff;
}
.spg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.spg-item {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  cursor: pointer;
}
.spg-thumb {
  background-size: cover;
  background-position: center;
  height: 400px;
  position: relative;
  transition: transform 0.3s;
}
.spg-thumb:hover {
  transform: scale(1.03);
}
.spg-title {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(0,0,0,0.5);
  color: #fff;
  padding: 12px;
  font-size: 18px;
  text-align: center;
}
.spg-arrow {
  margin-left: 8px;
}