html, body {
	margin: 0;
	padding: 0;
}

body {
	font-family: Arial, helvetica, sans-serif;
	background-color: #eee;
	line-height: 1.65;
	padding-bottom: 1000px;

}

/* latihan 1 */
.container-satu {
	width: min(90%, 800px);
	margin-inline: auto;
	background-color: #fff;
	padding: 20px;
	box-sizing: border-box;
	display: flex;
}

.kolom-utama {
	flex: 3;
	order: 2;

}

.sidebar-satu {
	flex: 1;
	order: 1;

}

.sidebar-dua {
	flex: 1;
	order: 3;
}
/* latihan selesai */

/* latihan 2 */
.container-dua {
	max-width: 800px;
	margin: 50px auto;
}

.layanan {
	padding: 20px;
	box-sizing: border-box;
	margin-bottom: 20px;
}

.layanan.satu {
	background-color: rgb(119, 119, 255);
}

.layanan.dua {
	background-color: lightgreen;
}

.layanan.tiga {
	background-color: salmon;
}

/* akhir latihan 2 */

/* latihan 3 */

.container-tiga {
	max-width: 800px;
	margin: 50px auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.thumbnail {
	width: 50%;

}

.thumbnail img {
	width: 100%;
}
/* akhir latihan 3 */

/* latihan 4 */
.container-empat {
	max-width: 800px;
	margin: 50px auto;
	display: flex;

}

.card {
	width: 100%;
	border: 1px solid #999;
	background-color: #eee;
	border-radius: 10px;
	overflow: hidden;
	margin: 10px;
	flex: 1;
}

.card .header {
	height: 150px;
	background-color: #666;
}

.card .content {
	text-align: center;
	padding-bottom: 20px;
}

.card.besar {
	transform: scale(1.12);
}
/* akhir latihan 4 */

/* Latihan 5 */
.container-lima {
	width: 500px;
	height: 500px;
	margin: 50px auto;
	border: 5px solid black;
	display: flex;
}

.kotak {
	width: 100px;
	height: 100px
	background-color: black;
	color: white;
	text-align: center;
	line-height: 100px;
	margin: auto;
	display: flex;
}
.kotak span {
	margin: auto
}



/* Responsive */

@media( min-width:600px ) {
	.container-dua {	
		display: flex;
		justify-content: space-between;
	}

	.layanan {
		width: 30%;
	}

	.thumbnail{
		width: 25%;
	}

	.card {
		width: 50%;
	}
}