/* ---- grid ---- */

.grid {}

/* clear fix */
.grid:after {
	content: '';
	display: block;
	clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
	width: 33.3333%;
}

.grid-item {
	float: left;
	border: 0px solid blue;
	border-color: hsla(0, 0%, 0%, 0.0);
	padding:5px;
}

.grid-item img {
	display: block;

}



.grid-item--width1 {
	width: 100%;
}

.grid-item--width2 {
	width: 50%;
}

.grid-item--width3 {
	width: 37.5%;
}

.grid-item--width4 {
	width: 25%;
}



/*--------media 제한설정--------*/

3 columns @media screen and (max-width:992px) {
	.grid-item {
		width: 33.333%;
	}
}

@media screen and (max-width:768px) {
	.grid-item {
		width: 100%;
	}
}