*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;  
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    line-height: 1.6;
    background: var(--bg-body);
    color: var(--text-primary);
    padding: 1rem;
}

.breadcrumb {
    font-size: .875rem;
    margin-bottom: 1rem;
}

.breadcrumb a {
    color: var(--accent);
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.hero {
    background: var(--bg-hero);
    padding: 2rem 1rem;
    text-align: center;
    margin-bottom: 2rem;
}

.hero h1 {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    color: var(--text-primary);
}

.grid-container {
    display: grid;
    gap: 1.5rem;
}

.style {
    background: var(--bg-card);
    padding: 1.5rem;
    border: 1px solid var(--accent);
    border-radius: .5rem;
}

.style h2 {
    margin-top: 0;
    margin-bottom: .75rem;
    font-size: 1.25rem;
    color: var(--text-primary);
}

.side-by-side {
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.side-by-side img {
    width: 100%;
    height: auto;
    border-radius: .4rem;
}

.responsive {
    max-width: 100%;
    height: auto;
    display: block;
}

.hide-under-500 {
    display: block;
}

footer {
    text-align: center;
    margin-top: 2rem;
    font-size: .85rem;
    color: var(--text-muted);
}

@media (max-width: 300px) {
    body {
        font-size: 0.85rem;  
    }
    
    .hero h1 {
        font-size: 1.4rem;
    }
    
    .grid-container {
        grid-template-columns: 1fr;  
    }
    
    .side-by-side {
        flex-direction: column;  
    }
    
    .style h2 {
        font-size: 1rem;
    }
}

@media (max-width: 500px) {
    .grid-container {
        grid-template-columns: 1fr;  
    }
    
    .side-by-side {
        flex-direction: column;  
    }
    
    .style h2 {
        font-size: 1.15rem;  
    }
    
    .hide-under-500 {
        display: none;
    }
}

@media (max-width: 768px) and (min-width: 501px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr);  /* Two columns */
    }
    
    .side-by-side {
        flex-direction: row;  
        align-items: center;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
}

@media (max-width: 992px) and (min-width: 769px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr);  /* Two columns, but different spacing */
        gap: 2rem;
    }
    
    .side-by-side {
        flex-direction: row;
        gap: 1rem;
    }
    
    .hero h1 {
        font-size: 2.3rem;
    }
    
    .style {
        padding: 1.8rem;
    }
}

@media (min-width: 993px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    .side-by-side {
        flex-direction: row;
        gap: 1.5rem;
    }
    
    .hero h1 {
        font-size: 2.5rem;
    }
}

:root {
    --bg-body:        #f9f9f9;
    --bg-card:        #ffffff;
    --bg-hero:        #eaeaea;
    --text-primary:   #222222;
    --text-muted:     #555555;
    --accent:         #777777;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-body:        #1e1e1e;
        --bg-card:        #2a2a2a;
        --bg-hero:        #262626;
        --text-primary:   #e0e0e0;
        --text-muted:     #b0b0b0;
        --accent:         #888888;
    }
}