.basic-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--spacer);
  color: var(--text);
}

.basic-card .card__icon svg {
  width: 2rem;
  height: 2rem;
  object-fit: contain;
}

.basic-card .card__headline {
  font-weight: var(--font-weight--semi);
}

.basic-card .card__content :last-child {
  margin-bottom: 0;
}

.basic-card .card__buttons {
  display: flex;
  flex-direction: column;
  gap: var(--spacer--sm);
}

.basic-card:not(:last-child)::before,
.basic-card::after {
  content: "";
  position: absolute;
  background: var(--accent);
}

:not(div[class*="grid__cols-"]) > .basic-card:not(:last-child)::after {
  bottom: calc(var(--card--gap) * -0.5);
  width: 100%;
  height: 1px;
}

@media (max-width: 767px) {
  .basic-card:not(:last-child)::after {
    bottom: calc(var(--card--gap) * -0.5);
    width: 100%;
    height: 1px;
  }
}

@media (min-width: 768px) {
  div[class*="grid__cols-2"] > .basic-card:not(:nth-child(2n))::before,
  div[class*="grid__cols-3"] > .basic-card:not(:nth-child(3n))::before,
  div[class*="grid__cols-4"] > .basic-card:not(:nth-child(4n))::before,
  div[class*="grid__cols-5"] > .basic-card:not(:nth-child(5n))::before,
  div[class*="grid__cols-6"] > .basic-card:not(:nth-child(6n))::before,
  div[class*="grid__cols-7"] > .basic-card:not(:nth-child(7n))::before,
  div[class*="grid__cols-8"] > .basic-card:not(:nth-child(8n))::before,
  div[class*="grid__cols-9"] > .basic-card:not(:nth-child(9n))::before,
  div[class*="grid__cols-10"] > .basic-card:not(:nth-child(10n))::before,
  div[class*="grid__cols-11"] > .basic-card:not(:nth-child(11n))::before,
  div[class*="grid__cols-12"] > .basic-card:not(:nth-child(12n))::before {
    top: 0;
    right: calc(var(--card--gap) * -0.5);
    width: 1px;
    height: 100%;
  }

  div[class*="grid__cols-2"] > .basic-card:not(:nth-last-child(-n + 2))::after,
  div[class*="grid__cols-3"] > .basic-card:not(:nth-last-child(-n + 3))::after,
  div[class*="grid__cols-4"] > .basic-card:not(:nth-last-child(-n + 4))::after,
  div[class*="grid__cols-5"] > .basic-card:not(:nth-last-child(-n + 5))::after,
  div[class*="grid__cols-6"] > .basic-card:not(:nth-last-child(-n + 6))::after,
  div[class*="grid__cols-7"] > .basic-card:not(:nth-last-child(-n + 7))::after,
  div[class*="grid__cols-8"] > .basic-card:not(:nth-last-child(-n + 8))::after,
  div[class*="grid__cols-9"] > .basic-card:not(:nth-last-child(-n + 9))::after,
  div[class*="grid__cols-10"]
    > .basic-card:not(:nth-last-child(-n + 10))::after,
  div[class*="grid__cols-11"]
    > .basic-card:not(:nth-last-child(-n + 11))::after,
  div[class*="grid__cols-12"]
    > .basic-card:not(:nth-last-child(-n + 12))::after {
    right: 0;
    bottom: calc(var(--card--gap) * -0.5);
    width: 100%;
    height: 1px;
  }
}