.amenities { position: relative; width: 100vw; margin-inline: calc(50% - 50vw); overflow: clip; padding: clamp(4.5rem, 9vw, 8rem) 0; background: var(--color-primary-strong); color: var(--color-surface); isolation: isolate; }
.amenities::before, .amenities::after { position: absolute; z-index: -1; width: 38rem; height: 38rem; border-radius: 50%; content: ""; filter: blur(8px); pointer-events: none; }
.amenities::before { top: -26rem; right: -12rem; background: radial-gradient(circle, rgba(202, 163, 74, .35), transparent 67%); }
.amenities::after { bottom: -29rem; left: -13rem; background: radial-gradient(circle, rgba(83, 140, 100, .27), transparent 68%); }
.amenities__inner { position: relative; }
.amenities__heading { display: grid; gap: var(--space-4); max-width: 46rem; }
.amenities__eyebrow { margin: 0; color: var(--color-secondary); font-size: .7rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.amenities__heading h2 { max-width: 44rem; margin: 0; font-family: var(--font-heading); font-size: clamp(3rem, 6.2vw, 5.7rem); font-weight: 600; line-height: .84; letter-spacing: -.055em; }
.amenities__heading > p:last-child { max-width: 42rem; margin: 0; color: rgba(248, 246, 242, .73); line-height: 1.72; }
.amenities__grid { display: grid; gap: .9rem; margin-top: clamp(2.5rem, 5vw, 4.25rem); }
.amenities__card { position: relative; display: grid; min-height: 13.25rem; align-content: space-between; gap: 1.75rem; overflow: hidden; padding: clamp(1.35rem, 2.5vw, 1.85rem); border: 1px solid rgba(248, 246, 242, .17); border-radius: 1.35rem; background: rgba(248, 246, 242, .055); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 1.3rem 2.7rem rgba(0, 0, 0, .08); transition: transform var(--transition-default), border-color var(--transition-default), background var(--transition-default), box-shadow var(--transition-default); }
.amenities__card::before { position: absolute; inset: auto -30% -80% auto; width: 12rem; height: 12rem; border-radius: 50%; background: rgba(202, 163, 74, .16); content: ""; opacity: 0; transform: scale(.6); transition: opacity var(--transition-default), transform .55s cubic-bezier(.22, 1, .36, 1); }
.amenities__icon { display: grid; width: 3.35rem; height: 3.35rem; place-items: center; border: 1px solid rgba(202, 163, 74, .42); border-radius: 1rem; background: rgba(202, 163, 74, .12); color: var(--color-secondary); transition: transform .55s cubic-bezier(.22, 1, .36, 1), background var(--transition-default), color var(--transition-default); }
.amenities__icon svg { width: 1.72rem; height: 1.72rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.amenities__card-content { position: relative; z-index: 1; }
.amenities__card h3 { margin: 0; color: var(--color-surface); font-family: var(--font-heading); font-size: clamp(1.55rem, 2.5vw, 2rem); font-weight: 600; line-height: .95; letter-spacing: -.035em; }
.amenities__card p { margin: .75rem 0 0; color: rgba(248, 246, 242, .68); font-size: .86rem; line-height: 1.65; }
.amenities__card-index { position: absolute; top: 1.3rem; right: 1.45rem; color: rgba(248, 246, 242, .36); font-size: .65rem; font-weight: 800; letter-spacing: .12em; }
@media (min-width: 600px) { .amenities__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .amenities__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (hover: hover) and (pointer: fine) { .amenities__card:hover { border-color: rgba(202, 163, 74, .62); background: rgba(248, 246, 242, .11); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1.8rem 3.2rem rgba(0, 0, 0, .19); transform: translateY(-.5rem); }.amenities__card:hover::before { opacity: 1; transform: scale(1); }.amenities__card:hover .amenities__icon { background: var(--color-secondary); color: var(--color-primary-strong); transform: rotate(-7deg) scale(1.08); } }
@media (max-width: 599.98px) { .amenities { padding-block: 4.25rem; }.amenities__heading h2 { font-size: clamp(2.8rem, 14vw, 4.15rem); }.amenities__card { min-height: 11.5rem; } }
@media (prefers-reduced-motion: reduce) { .amenities__card, .amenities__card::before, .amenities__icon { transition: none; }.amenities__card:hover { transform: none; } }