<script setup lang="ts">
import { POSITIONS, LANE_IMAGES, POSITIONS_STR } from '~/utils/cdragon'
</script>

<template>
  <Head>
    <Title>Home</Title>
  </Head>

  <div class="index-main-content">
    <NavBar :tierlist-list="true" />

    <ChampionSelector class="index-champion-selector" />
  </div>
</template>

<style>
.index-main-content {
  display: flex;
  margin-top: 50px;
}
.index-champion-selector {
  width: 80%;
}
.index-tierlist-info-container {
  margin: auto;
  margin-top: 0px;
  width: fit-content;
}
#index-tierlists {
  margin: auto;
  margin-top: 10px;
  width: fit-content;
}
@media only screen and (max-width: 1240px) {
  .index-main-content {
    flex-direction: column;
    margin-top: 5px;
  }
  .index-champion-selector {
    width: 100%;
  }
  .index-tierlist-info-container {
    display: flex;
    margin-bottom: 50px;
  }
}

@media only screen and (max-width: 500px) {
  #index-statp {
    display: none;
  }
  .index-tierlist-info-container {
    margin-bottom: 10px;
    margin-left: 10px;

    display: none;
  }
}
</style>
