@charset "UTF-8";
/* CSS Document */

.imagebox {
	grid-template-columns: 1fr 1.2fr;
	border-radius: var(--sml-radius);
}

.imagebox .content {
	background-color: rgba(var(--white), 1);
	border-top-left-radius: var(--sml-radius);
	border-bottom-left-radius: var(--sml-radius);
	color: rgba(var(--text), 1);
	padding: 20px;
	gap: 5px;
	align-content: start;
}

.imagebox .image-wrap {
	background-size: cover;
	background-color: #fff;
	background-blend-mode: luminosity;
	border-top-right-radius: var(--sml-radius);
	border-bottom-right-radius: var(--sml-radius);
}

.imagebox .image-wrap .overlay {
	align-items: end;
	justify-content: end;
	padding: 10px;
	border-top-right-radius: var(--sml-radius);
	border-bottom-right-radius: var(--sml-radius);
}

.imagebox.juniors .image-wrap .overlay {
	background-image: linear-gradient(135deg, rgba(var(--junior-mint), 0.7) 0%, rgba(var(--junior-purple), 0.7) 100%);
}

.imagebox.juniors .image-wrap .overlay::after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-image: linear-gradient(45deg, rgba(var(--junior-blue), 0.7) 0%, rgba(var(--junior-yellow), 0.7) 100%);
	mix-blend-mode: overlay;
	border-top-right-radius: var(--sml-radius);
	border-bottom-right-radius: var(--sml-radius);
}

.imagebox.juniors .image-wrap .overlay a.button {
	z-index: 1;
	background: none;
	background-color: rgba(var(--junior-purple), 1);
	color: rgba(var(--white), 1);
}

section.image-box {
	padding: var(--std-padding);
}

section.image-box .imagebox {
	min-height: 60vh;
}

section.summary-blocks {
	padding: var(--std-padding);
}

section.summary-blocks .widget.blocks {
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 1fr;
	gap: 30px;
}




@media screen and (max-width: 1180px) and (orientation: portrait),
screen and (max-width: 1024px) {
	
}

@media screen and (max-width: 768px) {
	section.summary-blocks .widget.blocks {
		grid-template-columns: repeat(1, 1fr);
	}
	
	.imagebox {
		grid-template-columns: 1fr;
	}
	
	.imagebox .content {
		border-radius: 0;
		border-bottom-left-radius: var(--sml-radius);
    	border-bottom-right-radius: var(--sml-radius);
	}
	
	.imagebox .image-wrap {
		order: -1;
		border-radius: 0;
		border-top-left-radius: var(--sml-radius);
    	border-top-right-radius: var(--sml-radius);
		min-height: 150px;
	}
	
	.imagebox.juniors .image-wrap .overlay, .imagebox.juniors .image-wrap .overlay::after {
		border-radius: 0;
		border-top-left-radius: var(--sml-radius);
    	border-top-right-radius: var(--sml-radius);
	}
}