DeCentN2MadnessandClaude Sonnet 4.6
626f1b7f37
Relocates HomeHero, HomeServicesIntro, HomeBenefits, HomeSkills, HomeInsurance, HomeEsa, and HomeDirector styles from the global components.css into each component's own <style> block. Removes the now-empty 480px media query and trims the 760px media query to only global rules. Build verified at 97 pages. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
40 lines
1.6 KiB
Plaintext
40 lines
1.6 KiB
Plaintext
---
|
|
import type { ServicesIntroSection } from '../../types/home-sections';
|
|
interface Props { section: ServicesIntroSection }
|
|
const { section } = Astro.props;
|
|
---
|
|
<style>
|
|
.services-grid { display: grid; gap: clamp(2rem, 6vw, 5rem); }
|
|
.feature-grid--intro { grid-template-columns: .75fr 1.25fr; }
|
|
.feature-grid--reverse { grid-template-columns: 1.25fr .75fr; }
|
|
.gear-photo { justify-self: center; max-width: 270px; }
|
|
.gear-photo-right { outline-color: #dce0e5; }
|
|
.two-column-list { columns: 2; }
|
|
@media (max-width: 760px) {
|
|
.services-grid { gap: 2rem; }
|
|
.services-grid .feature-grid { grid-template-columns: 1fr; }
|
|
.feature-grid > .gear-photo-right { grid-row: 3; }
|
|
.two-column-list { columns: 1; }
|
|
}
|
|
</style>
|
|
|
|
<section class="section services-intro">
|
|
<div class="container services-grid">
|
|
<div class="feature-grid feature-grid--intro">
|
|
<img class="gear-photo" src={`/assets/images/${section.servicesImage}`} alt={section.servicesImageAlt} />
|
|
<div>
|
|
<h2>{section.servicesHeading}</h2>
|
|
<ul class="source-list">{section.services.map((item) => <li>{item}</li>)}</ul>
|
|
</div>
|
|
</div>
|
|
<div class="feature-grid feature-grid--intro feature-grid--reverse">
|
|
<div>
|
|
<h2 class="no-balance">{section.commitmentsHeading}</h2>
|
|
<ul class="source-list two-column-list">{section.commitments.map((item) => <li>{item}</li>)}</ul>
|
|
<a class="button" href={section.commitmentsCta.href}>{section.commitmentsCta.label}</a>
|
|
</div>
|
|
<img class="gear-photo gear-photo-right" src={`/assets/images/${section.commitmentsImage}`} alt={section.commitmentsImageAlt} />
|
|
</div>
|
|
</div>
|
|
</section>
|