.mp-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}

.mp-card {
  overflow: hidden;
  border-radius: 18px;
  transition: transform .3s ease, box-shadow .3s ease;
}

.mp-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 42px rgba(39, 45, 49, .13);
}

.mp-card-visual.mp-product-photo {
  display: block;
  height: auto;
  aspect-ratio: .82;
  background: #ece9e2;
}

.mp-card-visual.mp-product-photo::before,
.mp-product-image.mp-product-photo::before {
  display: none;
}

.mp-card-visual.mp-product-photo img,
.mp-product-image.mp-product-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  animation: mpProductPhotoBreath 8s ease-in-out infinite;
  transition: transform .45s ease;
}

.mp-card:nth-child(2n) .mp-product-photo img {
  animation-delay: -2.5s;
}

.mp-card:hover .mp-product-photo img {
  animation-play-state: paused;
  transform: scale(1.035);
}

.mp-card-copy {
  text-align: center;
}

.mp-card-title {
  display: block;
}

.mp-card-title h3 {
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mp-card-title > span {
  display: inline-block;
  margin: 0 0 12px;
  font-weight: 800;
}

.mp-product-image.mp-product-photo {
  overflow: hidden;
  background: #eeeae3;
}

@keyframes mpProductPhotoBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.018); }
}

@media (max-width: 1100px) {
  .mp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
  .mp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 520px) {
  .mp-grid { grid-template-columns: 1fr; }
  .mp-card-visual.mp-product-photo { aspect-ratio: .86; }
}

@media (prefers-reduced-motion: reduce) {
  .mp-product-photo img { animation: none !important; }
}