@media (min-width: 0) {
    .card-deck .card {
        flex: 0 0 -30px;
    }
}

@media (min-width: 576px) {
    .card-deck .card {
        flex: 0 0 258px;
    }
}

@media (min-width: 768px) {
    .card-deck .card {
        flex: 0 0 354px;
    }
}

@media (min-width: 992px) {
    .card-deck .card {
        flex: 0 0 300px;
    }
}

@media (min-width: 1200px) {
    .card-deck .card {
        flex: 0 0 270px;
    }
}

/*
     @media (min-width: 0) {
	 .card-deck .card {
		 flex: 0 0 calc(100% - 30px);
	}
}
 @media (min-width: 576px) {
	 .card-deck .card {
		 flex: 0 0 calc(50% - 30px);
	}
}
 @media (min-width: 768px) {
	 .card-deck .card {
		 flex: 0 0 calc(50% - 30px);
	}
}
 @media (min-width: 992px) {
	 .card-deck .card {
		 flex: 0 0 calc(33.3333333333% - 30px);
	}
}
 @media (min-width: 1200px) {
	 .card-deck .card {
		 flex: 0 0 calc(25% - 30px);
	}
}


*/



/*/ Compile the following scss to css https://www.cssportal.com/scss-to-css/ */
/*// Bootstrap 4 breakpoints & gutter
$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px
) !default;

$grid-gutter-width: 30px !default;

// number of cards per line for each breakpoint
$cards-per-line: (
    xs: 1,
    sm: 2,
    md: 2,
    lg: 3,
    xl: 4
);

@each $name, $breakpoint in $grid-breakpoints {
    @media (min-width: $breakpoint) {
        .card-deck .card {
            flex: 0 0 calc(#{100/map-get($cards-per-line, $name)}% - #{$grid-gutter-width});
        }
    }
}

*/