.container-fluid {
display: grid;
height: 100%;
width: 100%;
padding: 0;
grid-template-columns: repeat(4,1fr);
grid-template-rows: 60px auto 50px;
grid-gap: 4px;
font-family: sans-serif;
}

.header {
background:  #007bff;
grid-column: 1/-1;
padding:5px;
text-align: center;
box-shadow: 0 4px 8px 0 rgba(0.3, 0.9,0.2, 0.2), -1px 2px 20px 0 rgba(0, 0, 0, 0.19);
}

.konten {
display: grid;
grid-column: 1/-1;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-column-gap: 4px;
grid-row-gap:4px;
}

.subkonten {
padding: 20px 20px 20px 20px;
}

.footer {
background: #f1f1f1;
grid-column: 1/-1;
text-align: center;
padding:15px;
box-shadow: -1px -2px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}



.corp_title {
	font-size: 30px;
	color: white;
}

.card {
	 box-shadow: 0px 4px 11px 0px rgba(0, 0, 0, 0.2);
}
.card-title {
	text-align: center;
}

@media only screen and (max-width: 406px) {
	.container-fluid {
		display: grid;
		height: 100%;
		width: 100%;
		padding: 0;
		grid-template-columns: repeat(4,1fr);
		grid-template-rows: 60px auto 70px;
		grid-gap: 4px;
		font-family: sans-serif;
		}
}