= form_for site, html: { class: form_class(site) } do |f|
  -# Tablet and mobile views with 1 columns and accordion
  .row.d-lg-none
    .col 
      %h1.pb-3.text-center.font-weight-bolder= t('.selector')
      - @designs.each do |design|
        %details.styled.pl-2.mb-n1.border-magenta.border-solid
          %summary
            %h5.font-weight-bolder.pt-2 - #{design.name}  
            .pb-2 #{design.description}
          .col
            %h5.text-center.font-weight-bolder.pb-3= t('.preview')
            .embed-responsive.embed-responsive-1by1
              %iframe.embed-responsive-item{allowfullscreen: "", src: "/placeholder.png"}
          .col
            %h5.text-center.font-weight-bolder.pb-3= t('.characteristics')
            - characteristics = design.characteristics.split(".")
            - characteristics.each_with_index do |characteristic, index|
              %h5 #{index + 1}. #{characteristic}
            %a.btn.btn-primary.btn-lg.btn-block.mt-4{role: "button", href: design.url}= t('.source_code')