/* http://stripesgenerator.com */

.card__media,.card__text{
	border:1px dotted}

@media screen and (min-width:30em) {
.main{
	background-image: linear-gradient(90deg, #000000 calc(50% - var(--gap)), #111 calc(50% - var(--gap)), #111 50%, #000000 50%, #000000 calc(100% - var(--gap)), #111 calc(100% - var(--gap)), #111 100%);
	background-size: var(--grid) var(--grid);
}
	.card__grid {
    background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) calc(50% - var(--gap)), rgba(200, 200, 200, 0.2) calc(50% - var(--gap)), rgba(200, 200, 200, 0.2) 50%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0) calc(100% - var(--gap)), rgba(200, 200, 200, 0.2) calc(100% - var(--gap)), rgba(200, 200, 200, 0.2) 100%);
    background-size: var(--grid) var(--grid);
}

}

#debug{
	bottom:0;
	left:0;
	background:#000;
	padding:0.5em;
	color:#fff;
	display:inline-block;
	position:fixed;
}
#debug:after{
	content:"xs";
}
/* 400 px */
@media screen and (min-width: 30em) {
	#debug:after{
		content:"xs / 480 Px";
	}
}
/* 576 px */
@media screen and (min-width: 36em) {
	#debug:after{
		content:"s / 576 Px / phone landscape";
	}
}
/* 768 px */
@media screen and (min-width: 48em) {
	#debug:after{
		content:"m / 768 Px / tablet portrait";
	}
}
/* 768 px */
@media screen and (min-width: 62em) {
	#debug:after{
		content:"l / 992 Px / tablet landscape";
	}
}
@media screen and (min-width: 75em) {
	#debug:after{
		content:"xl / 1200 Px / laptop";
	}
}
/* 1680 px */
@media screen and (min-width: 100em) {
	#debug:after{
		content:"xxl / 1600 Px / desktop";
	}
}