#hobbies { width: 100%; max-width: none; min-height: 100dvh; padding-top: 118px; padding-bottom: 118px; padding-left: max(32px, calc((100vw - 1096px) / 2)); padding-right: max(32px, calc((100vw - 1096px) / 2)); background: rgba(248, 248, 247, .84); backdrop-filter: blur(3px); }
#hobbies > * { max-width: 1096px; }

.hobbies-heading { width: 100%; margin: 0; text-align: center; }
.hobbies-heading p { width: 100%; max-width: none; margin: 0 auto; color: #5e8a76; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-align: center; }
.hobbies-heading h2 { margin: 13px 0 0; color: #293a31; font-size: clamp(38px, 4.8vw, 60px); letter-spacing: -.065em; line-height: 1.08; }
.hobbies-heading > span { display: block; margin-top: 15px; color: #718078; font-size: 14px; }

.hobbies-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 46px auto 0; }
.hobby-card { min-height: 188px; padding: 24px; border: 1px solid rgba(54, 85, 70, .13); border-radius: 18px; background: rgba(255, 255, 255, .62); box-shadow: 0 14px 34px rgba(43, 70, 56, .06); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.hobby-card:nth-child(1) { background: rgba(225, 239, 247, .65); }
.hobby-card:nth-child(2) { background: rgba(228, 244, 232, .65); }
.hobby-card:nth-child(3) { background: rgba(241, 234, 247, .64); }
.hobby-card:nth-child(4) { background: rgba(246, 239, 219, .68); }
.hobby-card:nth-child(5) { background: rgba(226, 242, 238, .66); }
.hobby-card:nth-child(6) { background: rgba(240, 232, 229, .65); }
.hobby-card:hover { border-color: rgba(65, 143, 105, .42); box-shadow: 0 0 15px rgba(65, 143, 105, .15), 0 18px 38px rgba(43, 70, 56, .08); transform: translateY(-4px); }
.hobby-card > span { display: block; font-size: 25px; line-height: 1; }
.hobby-card h3 { margin: 16px 0 0; color: #32473b; font-size: 17px; letter-spacing: -.035em; }
.hobby-card p { max-width: 25ch; margin: 8px 0 0; color: #6f7e76; font-size: 12px; line-height: 1.72; }

@media (prefers-reduced-motion: reduce) { .hobby-card { transition: none; } }

@media (max-width: 760px) {
  #hobbies { min-height: 100dvh; padding: 86px 20px 78px; }
  .hobbies-heading { text-align: center; }
  .hobbies-heading h2 { font-size: 39px; }
  .hobbies-heading > span { font-size: 13px; }
  .hobbies-grid { grid-template-columns: 1fr; gap: 13px; margin-top: 37px; }
  .hobby-card { min-height: 0; padding: 22px; }
}