/* CSS Document */

/* Primary Panel */
.primary-panel {
	display: grid;
	grid-template-columns: repeat(3, auto);
	grid-template-rows: auto;
	grid-column-gap: 0px;
	grid-row-gap: 0px;	
}

.primary-panel .side-label { grid-area: 1 / 1 / 2 / 2;  }
.primary-panel .promo { grid-area: 1 / 2 / 2 / 5;  }
.primary-panel .speaking-types { grid-area: 1 / 5 / 2 / 6;  }

.primary-panel .promo {
	display : flex;
 }

.promo img { width: 100%}

.primary-panel .speaking-types {
	padding: 20px;
	display : grid;
	grid-template-columns: auto;
	grid-template-rows: repeat(3, auto);
	grid-column-gap: 0px;
	grid-row-gap: 20px;
}

.speaking-types .row1 { grid-area: 1 / 1 / 2 / 2; display: block }
.speaking-types .row2 { grid-area: 2 / 1 / 3 / 2; display: block }
.speaking-types .row3 { grid-area: 3 / 1 / 4 / 2; display: block }

.speaking-types img { width: 100% }
.speaking-types .row1 img { border-top-right-radius: 10px;} 
.speaking-types .row3 img { border-bottom-right-radius: 10px;} 

.row1:hover, .row2:hover, .row3:hover img { opacity: 0.9}



/* adjust for smaller screen size */
@media only screen and (max-width: 800px), only screen and (orientation:portrait){
 .primary-panel {
	display: grid;
	grid-template-columns: repeat(3, auto);
	grid-template-rows: repeat(4, auto);
	grid-column-gap: 0px;
	grid-row-gap: 0px;	
}

.primary-panel .side-label { grid-area: 1 / 1 / 5 / 2;  }
.primary-panel .promo { grid-area: 1 / 2 / 3 / 4;  }
.primary-panel .speaking-types { grid-area: 3 / 2 / 5 / 4;  }

.primary-panel .promo {
	display : flex;
 }

.promo img { width: 100%; min-height: 400px }
.promo img { border-top-right-radius: 15px; }
	
.primary-panel .speaking-types {
	padding: 7.5px;
	display : grid;
	grid-template-columns: repeat(3, auto);
	grid-template-rows: auto;
	grid-column-gap: 5px;
	grid-row-gap: 0px;
}

.speaking-types .row1 { grid-area: 1 / 1 / 2 / 2; display: block }
.speaking-types .row2 { grid-area: 1 / 2 / 2 / 3; display: block }
.speaking-types .row3 { grid-area: 1 / 3 / 2 / 4; display: block }

.speaking-types img { width: 100% }
.speaking-types .row1 img { border-top-right-radius: 0px;} 
.speaking-types .row3 img { border-bottom-right-radius: 7.5px;} 

.row1:hover, .row2:hover, .row3:hover img { opacity: 0.9}
}