.main
{
   max-width: 50em;
   margin: auto;
   min-height: 100vh;
   padding-top: 2em;
}

.main__divisions
{
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   flex-wrap: wrap;
}

.main__division
{
   /* width: 20em; */
   /* margin-right: 1em; */
   width: 285px;
   margin: auto;
   margin-bottom: 2em;
}

.main__division-item
{
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
}


/* Small only */
@media screen and (max-width: 767px)
{
   .main__rank
   {
      border: 1px solid var(--black-coffee);
      padding: 0.3em;
   }

   .main__rank:hover
   {
      background-color: var(--cinereous);
      color: var(--black-coffee);
   }
}

@media screen and (max-width: 680px)
{
   .main__divisions
   {
      display: block;
   }

   .main__division
   {
      /* width: 20em; */
      /* margin-right: 1em; */
      width: 285px;
      margin-bottom: 2em;
   }
}


/* Medium and up */
@media screen and (min-width: 681px)
{
   .main__division:last-child
   {
      margin-bottom: 0;
   }
}

@media screen and (min-width: 768px)
{
   .main__ranks
   {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      flex-wrap: wrap;
   }
}

/* Medium only */
/*@media screen and (min-width: 768px) and (max-width: 991px) {}*/

/* Large and up */
/*@media screen and (min-width: 992px) {}*/

/* Large only */
/*@media screen and (min-width: 992px) and (max-width: 1199px) {}*/

/* X-Large and up */
/*@media screen and (min-width: 1200px) {}*/