```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>About Us - Cars</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!--                  ======  CSS Styles =========  -->
<style>
/* 1. CSS Variables – Color palette & spacing  */
:root {
    --clr-primary: #1e1e2f;   /* dark charcoal */
    --clr-secondary: #ff6b6b; /* warm red accent */
    --clr-bg: #f8f9fa;        /* light neutral background */
    --clr-text: #222;         /* dark text */
    --clr-light: #fff;        /* white */
    --spacing: 1rem;
    --spacing-sm: 0.5rem;
    --radius: 8px;
}

/* 2. Global resets & typography */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; }

body {
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
    line-height: 1.6;
    color: var(--clr-text);
    background: var(--clr-bg);
}

a { color: var(--clr-secondary); text-decoration: none; transition: color 0.3s ease; }
a:hover { color: var(--clr-primary); }

/* 3. Layout containers */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--spacing);
}

/* 4. Header */
header {
    background: var(--clr-primary);
    color: var(--clr-light);
    padding: var(--spacing);
}

header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

header .logo {
    font-size: 1.5rem;
    font-weight: 700;
}

header nav ul {
    list-style: none;
    display: flex;
    gap: var(--spacing);
}

header nav ul li a { color: var(--clr-light); }

/* 5. Hero Section */
.hero {
    background-image: url('https://source.unsplash.com/1600x900/?car,highway');
    background-size: cover;
    background-position: center;
    min-height: 70vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--clr-light);
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
}

.hero .content {
    position: relative;
    z-index: 1;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: var(--spacing);
    text-transform: uppercase;
    font-weight: 700;
}

.hero p {
    font-size: 1.25rem;
    max-width: 600px;
    margin: 0 auto;
}

/* 6. Main content – About section */
.about {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--spacing);
    margin-top: var(--spacing);
}

.about .card {
    background: var(--clr-light);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.about .card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.about .card h3 {
    padding: var(--spacing-sm) var(--spacing);
    background: var(--clr-primary);
    color: var(--clr-light);
    font-size: 1.25rem;
}

.about .card p {
    padding: var(--spacing-sm) var(--spacing);
    font-size: 0.95rem;
    color: var(--clr-text);
}

/* 7. Footer */
footer {
    background: var(--clr-primary);
    color: var(--clr-light);
    text-align: center;
    padding: var(--spacing);
    margin-top: var(--spacing);
}

footer p { margin-bottom: var(--spacing-sm); }

/* 8. Media Queries – Mobile responsiveness */
@media (max-width: 768px) {
    header nav ul { flex-direction: column; gap: var(--spacing-sm); }
    .hero h1 { font-size: 2.25rem; }
}

@media (max-width: 480px) {
    .hero h1 { font-size: 1.75rem; }
    .hero p { font-size: 1rem; }
}
</style>
<!-- End of CSS Styles -->
</head>
<body>

<header>
    <div class="container">
        <nav>
            <div class="logo">AutoSphere</div>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Models</a></li>
                <li><a href="#">Locations</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </div>
</header>

<main>
    <!-- Hero Section -->
    <section class="hero">
        <div class="content">
            <h1>About Us - Cars</h1>
            <p>Explore the passion behind our automotive design, innovation and commitment to the road.</p>
        </div>
    </section>

    <!-- About Content -->
    <section class="about section">
        <div class="container">
            <h2>Our Story</h2>
            <div class="card">
                <img src="https://source.unsplash.com/800x600/?car,performance" alt="Performance Car">
                <h3>Performance</h3>
                <p>We engineer vehicles that deliver exhilarating speed, precision handling, and unforgettable driving moments.</p>
            </div>
            <div class="card">
                <img src="https://source.unsplash.com/800x600/?car,design" alt="Design">
                <h3>Design</h3>
                <p>Each model boasts a blend of aesthetics and aerodynamic efficiency that turns heads wherever it goes.</p>
            </div>
            <div class="card">
                <img src="https://source.unsplash.com/800x600/?car,technology" alt="Technology">
                <h3>Technology</h3>
                <p>Innovations in electric powertrains, connectivity and safety keep you ahead of the future.</p>
            </div>
            <div class="card">
                <img src="https://source.unsplash.com/800x600/?car,eco" alt="Eco-Friendly">
                <h3>Eco-Friendly</h3>
                <p>Our commitment to sustainable materials and clean energy aligns luxury with responsibility.</p>
            </div>
        </div>
    </section>
</main>

<footer>
    <div class="container">
        <p>© 2025 AutoSphere. All rights reserved.</p>
        <p>Designed with love and wheels.</p>
    </div>
</footer>

</body>
</html>
```