.skills-hero-grid{display:grid;grid-template-columns:45% 55%;gap:var(--space-5);align-items:center}
.skills-hero-text{max-width:60ch}
.skills-hero-image img{width:100%;transition:transform var(--transition-base)}
.skills-hero-image:hover img{transform:scale(1.03)}

.skills-filter-bar{display:grid;grid-template-columns:60% 40%;gap:var(--space-3)}
.skills-filter-buttons{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.skills-filter-buttons button{border:1px solid var(--color-accent-gold);padding:0.4rem 0.8rem;border-radius:var(--radius-sm)}
.skills-filter-buttons button.active{background:var(--color-accent-blue);color:#fff}

.categories-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4)}
.category-card{min-width:0}

.skills-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}
.skill-card{position:relative}
.skill-card .bookmark{position:absolute;top:8px;right:8px}

.training-grid{display:grid;grid-template-columns:60% 40%;gap:var(--space-5)}
.training-text{max-width:65ch}

.comparison-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}

.builds-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}

.expert-text{max-width:70ch;margin-inline:auto}

.cta-box{text-align:center;max-width:60ch;margin-inline:auto;display:flex;flex-direction:column;gap:var(--space-3)}

@media(max-width:900px){
.skills-hero-grid{grid-template-columns:1fr}
.skills-filter-bar{grid-template-columns:1fr}
.categories-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.skills-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.training-grid{grid-template-columns:1fr}
.comparison-grid{grid-template-columns:1fr}
.builds-grid{grid-template-columns:1fr}
}

@media(max-width:500px){
.skills-grid,.categories-grid{grid-template-columns:1fr}
}