.content-cards {
  --gap: 15px;
  gap: var(--gap);
  flex-wrap: wrap;
  display: flex;
}
@media (min-width: 768px) {
  .content-cards {
    column-gap: max(var(--gap), 1.05337%);
    grid-template-columns: repeat(12, minmax(0, 1fr));
    display: grid;
  }
  @media (max-width: 1024px) {
    .content-cards:has(> li:nth-child(4)) {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .content-cards:has(> li:nth-child(4)) > li {
      grid-column: span 1;
    }
    .content-cards:has(> li:nth-child(4)) > li .o-picture img,
    .content-cards:has(> li:nth-child(4)) > li .card > svg {
      --ar: 1/1;
    }
  }
}
.content-cards--carousel {
  --slides: 1.22;
  --col-gap: var(--gap);
  margin-left: calc(var(--col-gap) * -1);
  gap: 0;
}
@media (min-width: 768px) {
  .content-cards--carousel {
    --slides: 2;
  }
}
@media (min-width: 1024px) {
  .content-cards--carousel {
    --slides: 3;
  }
}
@media (min-width: 1280px) {
  .content-cards--carousel {
    --slides: 4;
  }
}
.content-cards--carousel li {
  width: calc(100% / var(--slides) - var(--col-gap) * (var(--slides) - 1) / var(--slides));
  width: calc(100% / var(--slides));
  min-width: 0;
  padding-left: var(--col-gap);
  flex-shrink: 0;
}
.content-cards--title-overlay .card__top {
  position: relative;
}
.content-cards--title-overlay .card__top:after {
  background: var(--overlay);
  pointer-events: none;
  position: absolute;
  inset: 0;
}
.content-cards--rounded-image .card__top {
  width: 75px;
  height: 75px;
  border-radius: 50%;
  justify-content: center;
  align-self: center;
  display: flex;
  overflow: hidden;
}

.shopify-section--content-cards-timeline {
  .swiper-container {
    @media (min-width: 1024px) {
      display: none;
    }
  }

  .swiper {
    --slides: 1.22;
    --col-gap: var(--gap);

    @media (min-width: 768px) {
      --slides: 2;
    }

    li {
      width: calc(100% / var(--slides) - var(--col-gap) * (var(--slides) - 1) / var(--slides));
      width: calc(100% / var(--slides));
      min-width: 0;
      flex-shrink: 0;
    }
  }

  .timeline {
    display: grid;
    grid-template-columns: repeat(18, 1fr);
    grid-template-rows: auto 100px auto;
    gap: 20px 0;

    @media (max-width: 1024px) {
      display: none;
    }

    &::before {
      content: '';
      display: block;
      grid-area: 2/3/3/17;
      height: 50%;
      border-bottom: 2px solid black;
    }

    .timeline-item {
      position: relative;

      .card {
        img {
          aspect-ratio: auto;
        }
      }

      &::before {
        content: '';
        display: block;
        width: 10px;
        height: 10px;
        background-color: black;
        border-radius: 10px;
        position: absolute;
        left: 50%;
      }

      &::after {
        content: '';
        display: block;
        width: 0;
        height: 50px;
        background-color: black;
        position: absolute;
        left: 50%;
        border-left: 2px solid black;
      }

      &:nth-child(odd)::before {
        bottom: -20px;
        translate: -50% 100%;
      }

      &:nth-child(odd)::after {
        bottom: -20px;
        translate: -50% 100%;
      }

      &:nth-child(even)::before {
        top: -20px;
        translate: -50% -100%;
      }

      &:nth-child(even)::after {
          top: -22px;
          translate: -50% -100%;
      }
    }

    &[data-block-count="1"] {
      grid-template-rows: auto;

      &::before {
        display: none;
      }

      .timeline-item {
        &::before, &::after {
          display: none !important;
        }

        &:nth-child(1) {
          grid-area: 1/8/2/12;
        }
      }
    }

    &[data-block-count="2"] {
      grid-template-rows: auto 100px;

      .timeline-item {
        &:nth-child(even)::before {
          bottom: -20px;
          top: auto;
          translate: -50% 100%;
        }

        &:nth-child(even)::after {
          bottom: -20px;
          top: auto;
          translate: -50% 100%;
        }

        &:nth-child(1) {
          grid-area: 1/1/2/5;
        }

        &:nth-child(2) {
            grid-area: 1/15/2/19;
        }
      }
    }

    &[data-block-count="3"] {
      grid-template-rows: auto 100px;

      .timeline-item {
        &:nth-child(even)::before {
          bottom: -20px;
          top: auto;
          translate: -50% 100%;
        }

        &:nth-child(even)::after {
          bottom: -20px;
          top: auto;
          translate: -50% 100%;
        }

        &:nth-child(1) {
          grid-area: 1/1/2/5;
        }

        &:nth-child(2) {
            grid-area: 1/8/2/12;
        }

        &:nth-child(3) {
            grid-area: 1/15/2/19;
        }
      }
    }

    &[data-block-count="4"] {
      .timeline-item {
        &:nth-child(1) {
          grid-area: 1/1/2/5;
        }

        &:nth-child(2) {
            grid-area: 3/5/4/9;
        }

        &:nth-child(3) {
            grid-area: 1/10/2/14;
        }

        &:nth-child(4) {
            grid-area: 3/15/4/19;
        }
      }
    }

    &[data-block-count="5"] {
      .timeline-item {
        &:nth-child(1) {
          grid-area: 1/1/2/5;
        }

        &:nth-child(2) {
            grid-area: 3/4/4/8;
        }

        &:nth-child(3) {
            grid-area: 1/8/2/12;
        }

        &:nth-child(4) {
            grid-area: 3/11/4/15;
        }

        &:nth-child(5) {
            grid-area: 1/15/2/19;
        }
      }
    }
  }
}