.bento-icon{
	font-size:1.3em;
}

.bento-parent{
	margin-bottom: 3em;
}

.bento-parent > div{
	border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.1);
	margin-bottom: 20px;
	padding:10px;
	color: #FFFFFF;
}

.bento-parent p{
	color: #FFFFFF !important;
	margin-bottom: 0 !important;
}

.bento-parent > div .div-header{
	font-weight: bold;
	font-size: 1.2em;
}

.div1 {    
    background: #3865BC;
    background: radial-gradient(at left top, #3865BC, #3FD1D6);
}

.div2 {    
    background: #423899;
    background: radial-gradient(at left top, #423899, #27A4FF);

}

.div3 {    
    background: #423899;
    background: radial-gradient(at left top, #423899, #27A4FF);

}

.div4 {    
    background: #0F5789;
    background: radial-gradient(at left top, #0F5789, #4264D1);
}

.div5 {    
    background: #3865BC;
    background: radial-gradient(at left top, #3865BC, #3FD1D6);
}

.div6 {    
    background: #0F5789;
    background: radial-gradient(at left top, #0F5789, #4264D1);
}

@media (min-width:600px){
	.bento-parent {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-template-rows: repeat(3, 1fr);
		gap: 12px;	
	}

	.bento-parent div{	
		margin-bottom: 0;
	}
		
	.div1 {
		grid-column: span 2 / span 2;		
	}

	.div2 {
		grid-column: span 2 / span 2;
		grid-column-start: 3;	
	}

	.div3 {
		grid-row: span 2 / span 2;
		grid-row-start: 2;
	}

	.div4 {
		grid-column: span 2 / span 2;
		grid-row-start: 2;	
	}

	.div5 {
		grid-column-start: 4;
		grid-row-start: 2;	
	}

	.div6 {
		grid-column: span 3 / span 3;
		grid-column-start: 2;
		grid-row-start: 3;
	}
}