
.grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-column-gap: 30px;
	grid-row-gap: 30px;
	text-align: center;
}

.grid 001{
	border: solid 3px #e6b422;
}

.grid p {
	margin: 10px 0;
}

@media screen and (max-width: 800px) {
	.grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (max-width: 600px) {
	.grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 400px) {
	.grid {
		grid-template-columns: auto;
	}
}

.grid-product {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-column-gap: 30px;
	grid-row-gap: 30px;
	text-align: center;
}

.grid-product p {
	margin: 10px 0;
}

@media screen and (max-width: 800px) {
	.grid-product {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (max-width: 600px) {
	.grid-product {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 400px) {
	.grid-product {
		grid-template-columns: auto;
	}
}

.grid-product2 {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-column-gap: 10px;
	grid-row-gap: 10px;
	text-align: center;
}

.grid-product2 p {
	margin: 10px 0;
}

@media screen and (max-width: 800px) {
	.grid-product2 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (max-width: 600px) {
	.grid-product2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 400px) {
	.grid-product2 {
		grid-template-columns: auto;
	}
}

.grid-fullcustom {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 30px;
	grid-row-gap: 30px;
	text-align: center;
}

.grid-fullcustom p {
	margin: 10px 0;
}

@media screen and (max-width: 800px) {
	.grid-fullcustom {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (max-width: 600px) {
	.grid-fullcustom {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 400px) {
	.grid-fullcustom {
		grid-template-columns: auto;
	}
}


.grid-medal {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-column-gap: 30px;
	grid-row-gap: 30px;
	text-align: center;
}

.grid-medal p {
	margin: 10px 0;
}

@media screen and (max-width: 800px) {
	.grid-medal {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (max-width: 600px) {
	.grid-medal {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 400px) {
	.grid-medal {
		grid-template-columns: auto;
	}
}

.grid-medal2 {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-column-gap: 5px;
	grid-row-gap: 5px;
	text-align: center;
}

.grid-medal2 p {
	margin: 10px 0;
}

@media screen and (max-width: 800px) {
	.grid-medal2 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (max-width: 600px) {
	.grid-medal2 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (max-width: 400px) {
	.grid-medal2 {
		grid-template-columns: auto;
	}
}

.grid-medal02 {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-column-gap: 5px;
	grid-row-gap: 5px;
	text-align: center;
}

.grid-medal02 p {
	margin: 10px 0;
}

@media screen and (max-width: 800px) {
	.grid-medal02 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (max-width: 600px) {
	.grid-medal02 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (max-width: 400px) {
	.grid-medal02 {
		grid-template-columns: auto;
	}
}

.grid-medal3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 5px;
	grid-row-gap: 30px;
	text-align: center;
}

.grid-medal3 p {
	margin: 10px 0;
}

@media screen and (max-width: 800px) {
	.grid-medal3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (max-width: 600px) {
	.grid-medal3 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 400px) {
	.grid-medal3 {
		grid-template-columns: auto;
	}
}

.grid-medal4 {
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr 2fr;
}

.grid-medal4 p {
	margin: 10px 0;
}

@media screen and (max-width: 800px) {
	.grid-medal4 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (max-width: 600px) {
	.grid-medal4 {
		grid-template-columns: auto;
	}
}

.grid2 {
	display: grid;
	grid-template-columns: repeat(5, 1fr); /* 5â€”Ã± */
	grid-column-gap: 30px; /* Å Ã”Å u */
	grid-row-gap: 30px; /* ÂcÅ Ã”Å u */
	text-align: center;
	color: #fff;
}

.grid2 p {
	margin: 10px 0;
}

@media screen and (max-width: 800px) {
	.grid2 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (max-width: 600px) {
	.grid2 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 400px) {
	.grid2 {
		grid-template-columns: auto;
	}
}


