.occasions {
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 22%, rgba(244, 203, 198, .46), transparent 25%),
    radial-gradient(circle at 92% 72%, rgba(222, 195, 174, .45), transparent 28%),
    linear-gradient(135deg, #fffaf4 0%, #f8e7e3 55%, #f5eee5 100%);
}

.occasions .section-title { max-width: 980px; }
.occasions .section-title h2 {
  max-width: 900px;
  margin: 8px auto 18px;
  font-family: "Segoe Print", "Comic Sans MS", cursive;
  font-size: clamp(2.15rem, 4.2vw, 3.8rem);
  line-height: 1.2;
}

.photo-occasions {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  max-width: 1380px;
  padding: 45px 18px 70px;
  margin-inline: auto;
}

.occasion-photo {
  flex: 0 0 165px;
  height: 245px;
  margin-left: -5px;
  padding: 7px 7px 58px;
  overflow: visible;
  background: #fff;
  border: 1px solid #eee5df;
  box-shadow: 0 16px 34px rgba(83, 57, 54, .18);
  transition: transform .28s ease, box-shadow .28s ease;
  z-index: 1;
}
.occasion-photo:nth-child(1),
.occasion-photo.reveal.visible:nth-child(1) { transform: rotate(-7deg) translate(13px,13px); }
.occasion-photo:nth-child(2),
.occasion-photo.reveal.visible:nth-child(2) { transform: rotate(4deg) translate(7px,-4px); }
.occasion-photo:nth-child(3),
.occasion-photo.reveal.visible:nth-child(3) { transform: rotate(-3deg) translate(2px,20px); }
.occasion-photo:nth-child(4),
.occasion-photo.reveal.visible:nth-child(4) { transform: rotate(6deg) translate(-3px,-10px); }
.occasion-photo:nth-child(5),
.occasion-photo.reveal.visible:nth-child(5) { transform: rotate(-6deg) translate(-8px,15px); }
.occasion-photo:nth-child(6),
.occasion-photo.reveal.visible:nth-child(6) { transform: rotate(4deg) translate(-13px,-1px); }
.occasion-photo:nth-child(7),
.occasion-photo.reveal.visible:nth-child(7) { transform: rotate(-5deg) translate(-19px,18px); }
.occasion-photo::after { display: none; }
.occasion-photo img { height: 100%; object-fit: cover; }
.occasion-photo span {
  left: 7px;
  right: 7px;
  bottom: 10px;
  padding: 8px 4px;
  color: #352a2c;
  background: #f6dddc;
  border-radius: 50% 43% 51% 46%;
  text-align: center;
  font: .88rem/1.16 "Segoe Print", "Comic Sans MS", cursive;
}
.occasion-photo:nth-child(3n+2) span { background: #eee2d3; }
.occasion-photo:nth-child(3n) span { background: #e3ece5; }
.occasion-photo:hover,
.occasion-photo:focus-visible,
.occasion-photo.reveal.visible:hover,
.occasion-photo.reveal.visible:focus-visible {
  z-index: 8;
  transform: rotate(0) translateY(-10px) scale(1.04);
  box-shadow: 0 22px 45px rgba(83, 57, 54, .25);
}
.occasion-photo:hover img { transform: none; }

.all-occasions { background: linear-gradient(145deg, #fff9f3, #f4e2de); }
.occasion-gallery {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 12px 0;
  padding: 40px 15px;
}
.occasion-gallery > a {
  width: min(29vw, 350px);
  min-height: 450px;
  margin: 0 -3px 24px;
  padding: 10px 10px 96px;
  overflow: visible;
  color: #352a2c;
  background: #fff;
  border: 1px solid #eee5df;
  box-shadow: 0 18px 40px rgba(78, 52, 50, .17);
  transition: transform .28s ease, box-shadow .28s ease;
}
.occasion-gallery > a:nth-child(odd) { transform: rotate(-3deg); }
.occasion-gallery > a:nth-child(even) { transform: rotate(3deg) translateY(16px); }
.occasion-gallery > a::after { display: none; }
.occasion-gallery img { position: relative; height: 100%; object-fit: cover; }
.occasion-gallery a > div {
  left: 8px;
  right: 8px;
  bottom: 10px;
  padding: 8px;
  text-align: center;
  background: #f3d8d7;
  border-radius: 50% 44% 52% 45%;
}
.occasion-gallery > a:nth-child(3n+2) > div { background: #ebe1d2; }
.occasion-gallery > a:nth-child(3n) > div { background: #e1ece5; }
.occasion-gallery h2 { margin: 3px 0; font: 1.45rem/1.2 "Segoe Print", "Comic Sans MS", cursive; }
.occasion-gallery p { margin: 0; color: #625456; font-size: .84rem; }
.occasion-gallery small { color: #8e6a70; font-size: .7rem; }
.occasion-gallery > a:hover,
.occasion-gallery > a:focus-visible { z-index: 5; transform: rotate(0) translateY(-10px) scale(1.03); }
.occasion-gallery > a:hover img { transform: none; }

@media (max-width: 900px) {
  .photo-occasions {
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 35px 28px 65px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
  .occasion-photo { flex-basis: 155px; scroll-snap-align: center; }
  .occasion-gallery > a { width: 46%; min-height: 440px; }
}

@media (max-width: 620px) {
  .photo-occasions { display:flex; padding:32px 24px 62px; }
  .occasion-photo { width:auto; height:225px; flex-basis:145px; padding:6px 6px 54px; }
  .occasion-photo span { font-size:.78rem; }
  .occasion-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 10px; padding: 20px 10px; }
  .occasion-gallery > a { width: 100%; min-height: 340px; margin: 0; padding: 7px 7px 90px; transform: none !important; }
  .occasion-gallery h2 { font-size: 1.1rem; }
  .occasion-gallery p { font-size: .76rem; }
}

@media (max-width: 390px) {
  .occasion-photo { height:215px; flex-basis:138px; }
  .occasion-photo span { font-size: .78rem; }
  .occasion-gallery { grid-template-columns: 1fr; }
  .occasion-gallery > a { min-height: 430px; }
}