/* For Multi-Location Event Lists */
/* Stylised ul for semantically correct HTML  */
/* mles = Multi Location Event Squares */
.mles {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  padding-left: 0 !important;
}

.mles .mles__square {
  background-color: #f4f4f4;
  padding: 15px 15px 7px 15px;
  width: 100%;
  margin: 0;
  margin-bottom: 2rem;
}

    .mles .mles__square .mles__state-box {
      width: fit-content;
      margin: 0;
      padding: 0 10px;
      background-color: #0072ce;
      color: #ffffff;
      font-size: 20px;
      font-weight: 500;
      margin: 0;
    }

  .mles .mles__loc-date {
    margin: 0;
    margin-top: 15px;
  }

  .mles .mles__square .mles__date {
    margin: 0;
  }

  .mles .mles__square .mles__city {
    margin: 0;
    font-weight: 500;
  }

  .mles .mles__square .mles__registration {
    margin: 0;
    margin-bottom: 1rem; /* This wasn't workign in testing */
    padding-bottom: 0.275rem;
  }

    .mles .mles__square a.mles__registration.fmal::after {
      bottom: 0.6rem;
      height: .75rem;
      width: 0.75rem;
    }

    .mles .mles__square .mles__registration:last-child {
      margin-bottom: 0;
    }

@media (min-width: 768px) {
  .mles {
    flex-direction: row;
    flex-wrap: wrap;
  }

    .mles .mles__square {
      width: calc(50% - 1rem);
      margin-right: 2rem;
    }

  li.mles__square:nth-child(2n) {
    margin-right: 0;
  }
}

@media (min-width: 1200px) {
  .mles .mles__square {
    width: calc(34.4% - 2rem);
  }

  li.mles__square:nth-child(2n) {
    margin-right: 2rem;
  }

  li.mles__square:nth-child(3n) {
    margin-right: 0;
  }
}