.bucklet{
	display:flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}

.bucklet img{
	width:100%;
	height:100%;
	padding:10px;
	object-fit: contain;
	box-sizing: border-box;
}

.bucklet > .half{
	width: calc(50% - 20px);
	height:300px;
	max-height:300px;
	margin:10px;
}

.bucklet > .full{
	width: 100%;
	height:100%;
	margin:10px;
}

.bucklet > .triple{
	display:grid;
	grid-template-areas: 'a b'
						 'c c';
	align-items: center;
	justify-items: center;
}
.bucklet > .triple:not(.full) > img{max-height:150px;}
.bucklet > .triple > img:nth-child(1){grid-area: a;}
.bucklet > .triple > img:nth-child(2){grid-area: b;}
.bucklet > .triple > img:nth-child(3){grid-area: c;}

.bucklet :is(*[onclick],*[href]){
	cursor: pointer;
}

@media screen and (max-width: 768px) {
	.bucklet{flex-direction: column; margin: 0 5%;}
	.bucklet > .half{height:auto;max-height:unset;width:100%;}
	.bucklet > .triple > img{max-height:unset;}
}