@extends('layouts.public')
@section('content')
<x-page-hero :kicker="$caseStudy->archetype" :title="$caseStudy->title" :lede="$caseStudy->summary" :crumbs="$crumbs" />
<article class="mx-auto grid max-w-6xl gap-4 px-5 py-16 md:grid-cols-3 lg:py-20">
    @foreach(['01' => ['Before', $caseStudy->before_text], '02' => ['During', $caseStudy->during_text], '03' => ['After', $caseStudy->after_text]] as $num => [$label, $text])
        <section class="leak">
            <span class="text-xs font-semibold tracking-[0.16em] text-brass">{{ $num }}</span>
            <h2 class="mt-6 text-2xl font-semibold tracking-tight">{{ $label }}</h2>
            <p class="mt-3 text-sm leading-7">{{ $text }}</p>
        </section>
    @endforeach
</article>
@endsection