<div class="uk-container">
  <div class="uk-visible@s uk-position-center uk-text-center">
    <h2 class="uk-margin-remove-bottom">Welcome <%= current_user.discord_username %></h2>
    <p class="uk-margin-remove-top">Please select a dashboard</p>
    <div class="uk-child-width-1-2@s" uk-grid>
      <div>
        <%= link_to edit_user_path(current_user.discord_id), class: "esm-portal-nav-button", data: { turbolinks: "false" }  do %>
          <%= image_tag "player_icon.png", width: 85, height: 85, class: "uk-border-circle" %>
          <p class="uk-text-large uk-text-muted">PLAYER</p>
        <% end %>
      </div>

      <div>
        <%= link_to communities_path, class: "esm-portal-nav-button", data: { turbolinks: "false" } do %>
          <%= image_tag "admin_icon.png", width: 85, height: 85, class: "uk-border-circle" %>
          <p class="uk-text-large">SERVER</p>
        <% end %>
      </div>
    </div>
  </div>

  <div class="uk-hidden@s uk-text-center">
    <h2 class="uk-margin-large-top uk-margin-remove-bottom">Welcome <%= current_user.discord_username %></h2>
    <p class="uk-margin-remove-top">Please select a dashboard</p>
    <div class="uk-child-width-1-2@s uk-margin-large-bottom" uk-grid>
      <div>
        <%= link_to edit_user_path(current_user.discord_id), class: "esm-portal-nav-button", data: { turbolinks: "false" }  do %>
          <%= image_tag "player_icon.png", width: 85, height: 85, class: "uk-border-circle" %>
          <p class="uk-text-large uk-text-muted">PLAYER</p>
        <% end %>
      </div>

      <div>
        <%= link_to communities_path, class: "esm-portal-nav-button", data: { turbolinks: "false" } do %>
          <%= image_tag "admin_icon.png", width: 85, height: 85, class: "uk-border-circle" %>
          <p class="uk-text-large">SERVER</p>
        <% end %>
      </div>
    </div>
  </div>
</div>