/**
 * Cards
 */

.cards {
  display: grid;
  grid-template-columns: repeat(2, calc(50% - 0.5rem));
  gap: 1rem;
  margin: 1.5rem 0;
}
@media all and (min-width: 850px) {
  .cards {
    display: grid;
    grid-template-columns: repeat(2, calc(50% - 0.75rem));
    gap: 1.5rem;
  }
}

.cards--timeline {
  grid-template-columns: 100%;
}

.cards--3 {
  grid-column: span 2;
}

.cards--nb-3 .card:last-child,
.cards--nb-9 .card:last-child,
.cards--3 .card:nth-child(9) {
  grid-column: 1 / span 2;
  width: 100%;
  justify-self: center;
}

@media screen and (min-width: 850px) {
  .cards--3{
    grid-template-columns: repeat(3,calc(33.333% - 1rem));
  }
  .cards--nb-3 .card:last-child,
  .cards--nb-9 .card:last-child,
  .cards--3 .card:nth-child(9) {
    grid-column: initial;
    width: initial;
    justify-self: initial;
  }
}

.cards--3_4_3 {
  margin: 2rem 0;
}
@media screen and (min-width: 850px) {
  .cards--3_4_3 {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-areas:
    "a a a a b b b b c c c c"
    "d d d e e e f f f g g g"
    "h h h h i i i i j j j j";
    margin: 3rem 0 5rem 0;
  }

  .cards--3_4_3 .card:nth-child(1) {
    grid-area: a;
  }
  .cards--3_4_3 .card:nth-child(2) {
    grid-area: b;
  }
  .cards--3_4_3 .card:nth-child(3) {
    grid-area: c;
  }
  .cards--3_4_3 .card:nth-child(4) {
    grid-area: d;
  }
  .cards--3_4_3 .card:nth-child(5) {
    grid-area: e;
  }
  .cards--3_4_3 .card:nth-child(6) {
    grid-area: f;
  }
  .cards--3_4_3 .card:nth-child(7) {
    grid-area: g;
  }
  .cards--3_4_3 .card:nth-child(8) {
    grid-area: h;
  }
  .cards--3_4_3 .card:nth-child(9) {
    grid-area: i;
  }
  .cards--3_4_3 .card:nth-child(10) {
    grid-area: j;
  }
}

.cards--2_thin {
  max-width: 735px;
  margin: 2rem auto;
}
@media screen and (min-width: 850px) {
  .cards--2_thin {
    margin: 3rem auto 4rem;
  }
}