* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: Arial, sans-serif;
	background-color: #f5f5f5;
	padding: 20px;
}

/* Container for the whole layout */
.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
	width: 100%;
}

/* Row 1: Large image, centered */
.row-large {
	display: flex;
	justify-content: center;
	width: 100%;
}

.row-large img {
	max-width: 600px;
	width: 100%;
	height: auto;
}

/* All other rows: 2-column grid layout */
.row-small {
	display: grid;
	xgrid-template-columns: repeat(2, 1fr); /* 2 columns */
	grid-template-columns: repeat(3, 1fr); /* 2 columns */
	gap: 20px;
	width: 100%;
	max-width: 1200px; /* Optional max-width to limit the size */
}

/* Small images */
.row-small img {
	width: 100%;
	height: auto;
	max-width: 100%;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
	.row-large img {
		max-width: 400px;
	}

	.row-small {
		grid-template-columns: repeat(2, 1fr); /* Maintain 2 columns on smaller screens */
	}
}

@media (max-width: 480px) {
	.row-large img {
		max-width: 90%; /* Large image scaling */
	}

	.row-small {
		grid-template-columns: repeat(2, 1fr); /* Keep 2 columns on mobile */
		gap: 10px; /* Smaller gap for mobile */
	}
}