.strip {
  background: var(--bg);
  padding: 2.2rem 0;
  overflow: hidden;
  position: relative
}

.strip::before,
.strip::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12%;
  z-index: 2;
  pointer-events: none
}

.strip::before {
  left: 0;
  background: linear-gradient(to right, var(--bg), transparent)
}

.strip::after {
  right: 0;
  background: linear-gradient(to left, var(--bg), transparent)
}

.strip__track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: marquee 60s linear infinite
}

.strip:hover .strip__track {
  animation-play-state: paused
}

.strip__track img {
  height: clamp(150px, 22vw, 260px);
  width: auto;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 10px;
  transition: transform .5s var(--ease), filter .5s;
  filter: saturate(.9)
}

.strip__track img:hover {
  transform: scale(1.06) rotate(-1deg);
  filter: saturate(1.1)
}

.tile {
  position: relative;
  display: block;
  text-decoration: none;
  color: #fff;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 3/4;
  box-shadow: var(--shadow-1);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease)
}

.tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease)
}

.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(42, 13, 22, .92) 0%, rgba(42, 13, 22, .35) 45%, transparent 75%)
}

.tile__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.3rem 1.3rem 1.2rem;
  z-index: 2;
  transform: translateY(.4rem);
  transition: transform .6s var(--ease)
}

.tile h3 {
  margin: 0 0 .25rem;
  color: #fff;
  font-size: 1.3rem
}

.tile p {
  margin: 0;
  font-size: .9rem;
  color: #D9C2C7;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .6s var(--ease), opacity .6s var(--ease)
}

.tile:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-2)
}

.tile:hover img {
  transform: scale(1.08)
}

.tile:hover .tile__cap {
  transform: none
}

.tile:hover p {
  max-height: 5rem;
  opacity: 1
}

@media (hover:none) {
  .tile p {
      max-height: 5rem;
      opacity: 1
    }
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
  margin-top: 2.2rem
}

.card {
  position: relative;
  display: block;
  text-decoration: none;
  color: #fff;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: var(--shadow-1);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease)
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(42, 13, 22, .9) 0%, rgba(42, 13, 22, .2) 55%, transparent 100%)
}

.card__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem 1.1rem;
  z-index: 2
}

.card h3 {
  margin: 0;
  font-size: 1.15rem;
  color: #fff
}

.card p {
  margin: .15rem 0 0;
  font-size: .82rem;
  color: #D9C2C7
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-2)
}

.card:hover img {
  transform: scale(1.06)
}

.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-top: 2.2rem
}

@media (max-width:900px) {
  .tiles {
      grid-template-columns: repeat(3, 1fr)
    }
}

@media (max-width:600px) {
  .tiles {
      grid-template-columns: repeat(2, 1fr);
      gap: .8rem
    }
}

.tiles .tile {
  aspect-ratio: 3/4
}

.tiles .tile h3 {
  font-size: 1.15rem
}

.tiles .tile p {
  font-size: .8rem
}

.card::after {
  background: linear-gradient(to top, rgba(42, 13, 22, .88) 0%, rgba(42, 13, 22, .15) 50%, transparent 100%)
}

/* --- extracted from inline style attributes --- */
.btn--ghost-mulberry {
  color: var(--mulberry)
}

.note-soft {
  font-size: .92rem;
  color: var(--ink-soft);
  margin-top: .9rem
}