.cards-grid {
  display: grid;
  gap: 2.8rem 2.6rem;
  grid-template-columns: 1fr;
  margin: 3.2rem 0;

  @media (min-width: 768px) {
    margin: 4.8rem 0;
  }
}

.cards-grid.vt-carousel {
  margin: 0 -1.5rem;

  @media (min-width: 768px) {
    margin: 0;
  }

  .slick-slide {
    margin: 1.5rem;
  }

  .slick-slide > *,
  .slick-slide .tool {
    height: 100%;
  }

  .slick-dots {
    display: flex;
    gap: 2rem;
    justify-content: center;
    align-items: center;

    > li {
      width: 10px;
      height: 10px;
      background: #ffffff;
      border: 1px solid #006830;
      border-radius: 10px;
      list-style: none;
      margin: 0;

      button {
        margin-top: -6px;
        margin-left: -6px;

        &:focus-visible {
          margin-bottom: 0;
          outline-offset: 2px;
          outline: 2px solid var(--button-color-focus, #0064FF);
          border-radius: 50%;
        }
      }
    }

    .slick-active {
      background: #006830;
    }

    .slick-dot-icon {
      display: none;
    }
  }
}

/* Two-column layout */
.cards-grid.two-col {
  grid-template-columns: 1fr;

  @media (min-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Three-column layout */
.cards-grid.three-col {
  grid-template-columns: 1fr;

  @media (min-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (min-width: 992px) {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Four-column layout */
.cards-grid.four-col {
  grid-template-columns: 1fr;

  @media (min-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (min-width: 992px) {
    grid-template-columns: repeat(3, 1fr);
  }
}