<section class="pt-14">
    <div class="flex flex-col justify-center items-center space-x-4">
        <!--<h1 class="text-2xl font-bold capitalize-first">{{.Attribute.Title}}</h1>-->
        <!-- Description -->
        <div class="p-4 m-4 {{if eq "info" .Attribute.Rating}} border rounded-lg border-blue-600/40 bg-blue-600/20
            {{end}} {{if eq "good" .Attribute.Rating}} border rounded-lg border-green-600/40 bg-green-600/20 {{end}}
            {{if eq "warn" .Attribute.Rating}} border rounded-lg border-yellow-600/40 bg-yellow-600/20 {{end}} {{if
            eq "bad" .Attribute.Rating}} border rounded-lg border-red-600/40 bg-red-600/20 {{end}} ">

            <h3 class="mb-3 text-lg font-bold uppercase border-b md:text-xl border-b-white/20">
            {{if eq "info" .Attribute.Rating}}
            🔵
            {{end}}
            {{if eq "good" .Attribute.Rating}}
            ✅
            {{end}}
            {{if eq "warn" .Attribute.Rating}}
            ⚠️
            {{end}}
            {{if eq "bad" .Attribute.Rating}}
            🛑
            {{end}}
            {{.Attribute.Title}}
            </h3>

            <p class="max-w-lg">
                {{if ne .Attribute.Description ""}}
                {{.Attribute.Description | safe}}
                {{else}}
                {{.Attribute.Name}} does not have a description.
                {{end}}
            </p>
        </div>
    </div>
</section>

<!-- Services list -->
<section class="flex flex-col justify-center items-center px-1 mx-2 mt-6">
    <h2 class="text-lg font-bold text-center uppercase">Services with this point:</h2>
    <div class="grid grid-cols-1 gap-3 mx-auto mt-2 max-w-6xl md:grid-cols-2 lg:grid-cols-3">
        {{range .Services}}
        {{partial "partials/service_card" .}}
        {{end}}
    </div>
</section>