body {
    font-family: Roboto, Arial, sans-serif;
    gap: 0.5rem;
}

:root {
    font-size: 16px;
}


.atp-card {
    min-width: 13.75rem;

    --card-height: 7.875rem;

    min-height: var(--card-height);
    padding: 0.75rem;
    flex-direction: column;
    border-radius: 0.5rem;
    background-color: var(--Color-Neutre-white);
}

.atp-card p {
    margin: 0rem;
}

.atp-card-group-scroll:empty {
  --rows-visible: 0;
}
.atp-card-group-scroll:has(> :nth-child(1)) {
  --rows-visible: 1;
}
.atp-card-group-scroll:has(> :nth-last-child(5):nth-child(-n + 9999999)){
  --rows-visible: 2;
}


.atp-card-group-scroll {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap; 
  gap: 0.5rem;

  --card-height: 7.875rem;
  height: calc(var(--rows-visible) * var(--card-height) + (var(--rows-visible) - 1) * 0.5rem + 1.45rem);

  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.5rem;            
  padding-bottom: 0.5rem;
  overflow-y: auto; 
  box-sizing: border-box;        
  scroll-snap-type: y mandatory;
}

.atp-card-group-scroll .atp-card {
    display: flex;
}

.apt-card-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    flex: 1 0 0;
    align-self: stretch;
}

.atp-card-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    align-self: stretch;
}

.atp-card-header .atp-card-header-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    flex: 1 0 0;
    overflow: hidden;
    color: var(--Color-Text-blacktext);
    text-overflow: ellipsis;
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    max-width: 260px;
}

.atp-card-flex {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    align-self: stretch;
}

.atp-card-flex p {
    margin: 0rem;
}


.atp-card-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    align-self: stretch;
}

.atp-card-footer-text {
    flex: 1 0 0;
    text-align: right;
}