<% provide(:title) { title } %>

<%= render Shared::BannerComponent.new("sdg") %>

<div class="sdg-goals-index">
  <%= link_list(*goal_links, class: "sdg-goal-list") %>

  <% phases.each do |phase| %>
    <section class="sdg-phase" id="sdg_phase_<%= phase.kind %>">
      <header>
        <h2 class="title"><%= phase.title %></h2>
      </header>

      <%= render "shared/cards", cards: phase.cards %>
    </section>
  <% end %>
</div>

<% provide(:title) { title } %>

<main class="sdg-goals-index">
  <%= render Shared::BannerComponent.new("sdg") %>

  <%= link_list(*goal_links, class: "sdg-goal-list") %>

  <% phases.each do |phase| %>
    <section class="sdg-phase" id="sdg_phase_<%= phase.kind %>">
      <header>
        <h2 class="title"><%= phase.title %></h2>
      </header>

      <%= render "shared/cards", cards: phase.cards %>
    </section>
  <% end %>
</main>

Use <main> in SDG index
Use <main> in SDG index

Just like we do in the other sections.

We're also moving the banner inside the <main> element because we do it
the same way in other sections.
