.brand-logo {
  display: block;
  width: 246px;
  max-width: 48vw;
  height: auto;
}

.hero-product {
  justify-self: center;
  width: min(390px, 86%);
  margin: 0;
  padding: 22px;
  background: rgba(255, 253, 248, 0.94);
  border: 1px solid rgba(201, 162, 93, 0.8);
  box-shadow: 30px 35px 70px rgba(22, 7, 10, 0.55);
  transform: rotate(1.5deg);
}

.hero-product img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  background: #fff;
}

.hero-product figcaption {
  padding-top: 13px;
  color: #5c1726;
  font: 700 0.72rem Arial, sans-serif;
  letter-spacing: 0.13em;
  text-align: center;
  text-transform: uppercase;
}

.card-image {
  min-height: 360px;
  padding: 0;
  overflow: hidden;
  justify-content: space-between;
  background: #f2e7d8;
}

.card-image:nth-child(even) {
  background: #f2e7d8;
}

.card-image img {
  display: block;
  width: 100%;
  height: 270px;
  object-fit: contain;
  background: #fff;
}

.card-image div {
  padding: 18px 22px 20px;
  background: linear-gradient(115deg, #7a1025, #291014);
}

.card-image h3 {
  color: #fff;
}

@media (max-width: 780px) {
  .brand-logo {
    width: 210px;
    max-width: 63vw;
  }

  .hero {
    padding: 64px 0;
  }

  .hero-product {
    width: min(310px, 82vw);
    margin: 54px auto 0;
    transform: none;
  }
}