<template>
  <div class="rounded-card-list">
    <slot />
  </div>
</template>

<style lang="scss">
  .rounded-card-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-cards);
    justify-content: flex-start;
    margin-left: 30px;
  }
  @media (max-width: 572px) {
    .rounded-card-list {
      justify-content: center;
    }
  }

  // Taille des cards
  @media (max-width: 599px) {
    .rounded-card-list > .rounded-card {
      max-width: 260px;
      flex: 1 1 260px;
      max-width: 90%;
    }
  }
  @media (min-width: 600px) {
    .rounded-card-list > .rounded-card {
      max-width: 260px;
      flex: 1 1 260px;
    }
  }
  @media (min-width: 700px) {
    .rounded-card-list > .rounded-card {
      max-width: 280px;
      flex: 1 1 280px;
    }
  }
  @media (min-width: 800px) {
    .rounded-card-list > .rounded-card {
      max-width: 280px;
      flex: 1 1 280px;
    }
  }
  @media (min-width: 900px) {
    .rounded-card-list > .rounded-card {
      max-width: 260px;
      flex: 1 1 260px;
    }
  }

  @media (min-width: 1000px) {
    .rounded-card-list > .rounded-card {
      max-width: 280px;
      flex: 1 1 280px;
    }
  }

  @media (min-width: 1100px) {
    .rounded-card-list > .rounded-card {
      max-width: 300px;
      flex: 1 1 300px;
    }
  }

  @media (min-width: 1200px) {
    .rounded-card-list > .rounded-card {
      max-width: 258px;
      flex: 1 1 258px;
    }
  }

  @media (min-width: 1300px) {
    .rounded-card-list > .rounded-card {
      max-width: 283px;
      flex: 1 1 283px;
    }
  }

  @media (min-width: 1400px) {
    // style appliqué au composant enfant via sa classe
    .rounded-card-list > .rounded-card {
      max-width: 308px;
      flex: 1 1 308px;
    }
  }



</style>
