.card-grid {
  margin: 1.5rem auto;
  width: 100%;
  /* Styles for IE10 and IE11 */
  /* Styles only for Edge */
}
.card-grid--container-one-column,
.card-grid--container-two-column,
.card-grid--container-three-column,
.card-grid--container-four-column {
    grid-template-columns: repeat(1, calc(100% - 1.5rem));
}

.card-grid--container {
    display: grid;
    grid-gap: 1.5rem;
    row-gap: 1.5rem;
    grid-template-rows: minmax(200px, auto);
    grid-auto-flow: row dense;
}

.card-width-1,
.card-width-2,
.card-width-3,
.card-width-4 {
    grid-column-start: span 1;
}

@media (min-width: 640px) {
    .card-grid--container-one-column {
        grid-template-columns: repeat(1, calc(100% - 1.5rem));
    }
    .card-grid--container-two-column {
        grid-template-columns: repeat(1, calc(100% - 1.5rem));
    }
    .card-grid--container-three-column {
        grid-template-columns: repeat(1, calc(100% - 1.5rem));
    }
    .card-grid--container-four-column {
        grid-template-columns: repeat(2, calc(50% - 1.5rem));
    }
    .card-width-2 {
        grid-column-start: span 1;
    }
    .card-width-3 {
        grid-column-start: span 2;
    }
    .card-width-4 {
        grid-column-start: span 2;
    }

}
@media (min-width: 768px) {
    .card-grid--container-two-column {
        grid-template-columns: repeat(2, calc(50% - 1.5rem));
    }
    .card-grid--container-three-column {
        grid-template-columns: repeat(2, calc(50% - 1.5rem));
    }
    .card-grid--container-four-column {
        grid-template-columns: repeat(2, calc(50% - 1.5rem));
    }
    .card-width-2 {
        grid-column-start: span 2;
    }
    .card-width-3 {
        grid-column-start: span 2;
    }
    .card-width-4 {
        grid-column-start: span 2;
    }
}

@media (min-width: 1024px) {
    .card-grid--container-three-column {
        grid-template-columns: repeat(3, calc(33.33% - 1.5rem));
    }
    .card-grid--container-four-column {
        grid-template-columns: repeat(3, calc(33.33% - 1.5rem));
    }
    .card-width-3 {
        grid-column-start: span 3;
    }
    .card-width-4 {
        grid-column-start: span 4;
    }

}
@media (min-width: 1280px) {
    .card-grid--container-four-column {
        grid-template-columns: repeat(4, calc(25% - 1.5rem));
    }
    .card-width-4 {
        grid-column-start: span 4;
    }

}

.card-grid--container.neos-contentcollection:before {
  content: "";
}