@media (max-width: 1024px) {
.rm8x3np {
grid-template-columns: 1fr;
}

.qx8m2np {
grid-template-columns: 1fr;
}

.wm8x4kp {
grid-template-columns: 1fr;
}

.rm5x7nq {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
}

@media (max-width: 768px) {
.km9v3xr {
position: fixed;
top: 0;
right: -100%;
width: 280px;
height: 100vh;
background: var(--color-bg-light);
flex-direction: column;
align-items: flex-start;
padding: var(--spacing-xl) var(--spacing-lg);
border-left: 1px solid var(--color-border);
transition: right 0.3s ease;
z-index: 1001;
}

.km9v3xr.active {
right: 0;
}

.pn2x9lq {
flex-direction: column;
align-items: flex-start;
width: 100%;
}

.lm8q5vx {
width: 100%;
padding: var(--spacing-md);
}

.vp9m4xk {
margin-left: 0;
margin-top: var(--spacing-md);
width: 100%;
}

.pw8x1nz {
display: block;
}

.rq4n7js {
display: flex;
}

.rq4n7js.active .ht6p2lk:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}

.rq4n7js.active .ht6p2lk:nth-child(2) {
opacity: 0;
}

.rq4n7js.active .ht6p2lk:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}

.tm4x7np {
position: absolute;
top: var(--spacing-md);
right: calc(var(--spacing-md) + 60px);
}

.tx2m8np {
font-size: 1.875rem;
}

.pm7x4kv {
font-size: 1rem;
}

.km4x9np {
flex-direction: column;
}

.jp5w8nx {
width: 100%;
}

.qm7x4np {
grid-template-columns: 1fr;
}

.gx4m8np {
grid-template-columns: 1fr;
}

.wx4m9kp {
grid-template-columns: 1fr;
}

.pw7m3xk {
grid-template-columns: 1fr;
}

.sx7m4kp {
grid-template-columns: 1fr;
position: relative;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
display: flex;
gap: var(--spacing-md);
}

.gx9m2kp {
flex: 0 0 100%;
scroll-snap-align: start;
}

.sx7m4kp::after {
content: '';
flex: 0 0 1px;
}

.ax9m3kp {
flex-direction: column;
text-align: center;
}

.lx4m9kp {
justify-content: center;
}

.vx2m8np {
flex-direction: column;
text-align: center;
}

.mx4k9lp {
align-items: center;
}
}

@media (max-width: 480px) {
.nx7h4kp {
padding: var(--spacing-md);
}

.cw9m2vx {
padding: 0 var(--spacing-sm);
}

.zm4x7kp {
padding: var(--spacing-md);
border-radius: var(--radius-lg);
}

.hx7m4kp {
font-size: 1.5rem;
}

.tx2m8np {
font-size: 1.5rem;
}

.pm7x4kv {
font-size: 0.9375rem;
}

.nx9m4kp {
font-size: 2.5rem;
}

.px9m2kv {
padding: var(--spacing-md);
}

.lm4x7np {
font-size: 2.5rem;
}

.vm2x9kw,
.lm9x4kp,
.pm8x3kv {
padding: var(--spacing-md);
}

.tm4x7np {
right: var(--spacing-md);
top: var(--spacing-md);
flex-direction: column;
gap: var(--spacing-xs);
}

.jp5w8nx {
font-size: 0.875rem;
padding: 0.625rem 1.25rem;
}

.wx3m7kp {
padding: 0.75rem 1.5rem;
}

.vx8m2kp {
padding: var(--spacing-md);
}

.kp9m3xw {
flex-direction: column;
}

.rm5x8kw {
text-align: left;
margin-top: var(--spacing-md);
}

.xm2p9lv {
justify-content: flex-start;
}

.nx4p8qm {
width: 50px;
height: 50px;
}

.am8x4kp {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-md);
}

.vm9k2xw {
width: 100%;
}

.rm8x3kp {
width: 100%;
text-align: center;
padding: var(--spacing-xs);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
}

.wx9m4kp {
padding: var(--spacing-sm);
}

.vx2m8np {
gap: var(--spacing-sm);
}

.tx8m3np {
font-size: 0.9375rem;
}

.bx7m2kp {
font-size: 0.8125rem;
}
}

@media (min-width: 769px) {
.sx7m4kp {
display: grid;
}
}

@media (hover: hover) {
.vx8m2kp {
transition: all 0.3s ease;
}

.jp5w8nx {
transition: all 0.3s ease;
}

.px9m2kv {
transition: all 0.3s ease;
}

.gx9m2kp img {
transition: transform 0.3s ease;
}
}

@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}