/* Okazje jako kafle ze zdjęciami: na telefonie przewijany rząd, na komputerze pięć w rzędzie. */
.occasions-tiles { padding: var(--space-16) 0; }
.occ-tiles { display: flex; gap: var(--space-4); margin: var(--space-8) calc(-1 * var(--space-4)) 0; padding: 0 var(--space-4) var(--space-3); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.occ-tiles li { flex: 0 0 min(64vw, 14rem); scroll-snap-align: start; }
.occ-tile { display: grid; gap: .2rem; }
.occ-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; margin-bottom: var(--space-2); border-radius: var(--radius-lg); background: var(--color-blush); transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.occ-tile strong { font-family: var(--font-display); font-variation-settings: 'SOFT' 100; font-weight: 340; font-size: 1.35rem; letter-spacing: -.02em; line-height: 1.15; }
.occ-tile small { font-size: .8rem; color: #5c635f; }
@media (hover: hover) { .occ-tile:hover img { transform: translateY(-4px); } .occ-tile:hover strong { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; } }
@media (min-width: 48rem) { .occ-tiles { margin-inline: 0; padding-inline: 0; overflow: visible; display: grid; grid-template-columns: repeat(5, 1fr); } .occ-tiles li { flex: none; } }