/* widget: ss-moments */
.ss-moments__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.ss-moments__titles { display: flex; flex-direction: column; gap: 16px; max-width: 544px; }
.ss-moments__head .ss-link { align-self: auto; }

.ss-moments__grid {
  display: grid; gap: 24px;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  aspect-ratio: 1152 / 576;
}
.ss-moments__tile { position: relative; display: block; overflow: hidden; border-radius: var(--ss-radius); }
.ss-moments__tile--lg { grid-row: 1 / span 2; }
.ss-moments__tile--wide { grid-column: 2 / span 2; }
.ss-moments__tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ss-ease); }
.ss-moments__tile::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 105, 114, .25)); opacity: 0; transition: opacity .5s; }
.ss-moments__tile:hover img { transform: scale(1.06); }
.ss-moments__tile:hover::after { opacity: 1; }

@media (max-width: 860px) {
  .ss-moments__head { flex-direction: column; align-items: flex-start; }
  .ss-moments__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; aspect-ratio: auto; gap: 16px; }
  .ss-moments__tile { aspect-ratio: 1; }
  .ss-moments__tile--lg { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
  .ss-moments__tile--wide { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
}