@use '../utilities';

.line-up-header {
  margin-bottom: utilities.space(4);
}

.line-up__artistes {
  .line-up__artiste {
    margin-bottom: utilities.space(4);
    display: flex;
    flex-direction: column;
    align-items: center;

    img {
      order: -1;
      margin-bottom: utilities.space(2);
      width: 100%;
    }

    h3 {
      font-size: 1.8rem;
      margin-bottom: utilities.space(1);
      text-align: center;
    }
  }
}

@media screen and (width >= 768px) {
  .line-up-header {
    margin-bottom: 0;
  }

  .line-up__artistes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    .line-up__artiste {
      width: calc(50% - 2rem);

      &:nth-child(even) {
        margin-left: 4rem;
      }
    }
  }
}

@media screen and (width >= 1280px) {
  .line-up__artistes {
    gap: utilities.space(8) 0;

    .line-up__artiste {
      margin-bottom: 0;
      width: calc((100% / 3) - 2rem);

      &:nth-child(even) {
        margin-left: unset;
      }

      &:not(:nth-child(3n + 1)) {
        margin-left: 3rem;
      }

      h3 {
        font-size: 3.2rem;
        white-space: nowrap;
      }

      .line-up__artiste-dates {
        font-size: 2.2rem;
      }
    }
  }
}