body {background: var(--flyp-background, black)}

.tile#s12 {display:none;}

@media (min-width: 1061px) {
	body {font-size: 1.2vw}
	.gallery {
		padding: 2vw;
		grid-template-columns: 2fr 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr 1fr;
		grid-template-areas:
			"a1 a2 a3 a4"
			"a5 a6 a7 a8"
			"a5 a9 a10 a10"
			"a5 a11 a10 a10";
		grid-gap: 1vw;
		height: 100vw;
		max-height: 100vh;
		min-height: 56.5vw;
	}
	.tile#s1 div.noimage .text {
		font-size: 4vh;
		line-height: 1.2em;
	}
}
@media (min-width: 1061px) AND (min-aspect-ratio: 4/3) {
	body {font-size: 1.1vw}
}

@media (min-width: 641px) AND (max-width: 1060px) {
	body {font-size: 1.5vw}
	.gallery {
		padding: 2vw;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr 1fr;
		grid-template-areas: "a1 a1 a2 a3"
				"a5 a5 a4 a6"
				"a5 a5 a7 a10"
				"a8 a9 a11 a10";
		grid-gap: 1vw;
		height: 100vw;
		max-height: 120vh;
		min-height: 56.5vw;
	}
	.tile#s1 div.noimage .text {
		font-size: 3.6vw;
		line-height: 1.2em;
	}
}
@media  (max-width: 640px) {
	body {font-size: 14px}
	.gallery {
		padding:6.6vw;
		grid-gap:0.66em;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-areas:
			"a1 a1"
			"a5 a5"
			"a5 a5"
			"a2 a3"
			"a4 a6"
			"a7 a8"
			"a9 a10"
			"a11 a10";
		grid-gap:0.66em;
		height:250vw;
		max-height:250vw;
	}
	.tile#s1 div.noimage .text {
		font-size: 8vw;
		line-height: 1.2em;
	}
}

@media (max-width: 480px) {
	body {font-size: 11px}
	div.tile#t1 { grid-area: 2 / 1 / 4 / 3; }
}


html.grid .tile {border-radius: var(--flyp-roundtiles, 0); }
html.flex .tile > div > img {border-radius: var(--flyp-roundtiles, 0); }

.tile > div {background-color: transparent !important}
.tile > div::before {display:none !important}
.tile div .text { color: var(--flyp-text, white)!important; margin-top: 1em;}
.tile div .info { color: var(--flyp-text, white)!important; }

html.grid .tile div .text span {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight:bold;
}
.tile#s5 div.noimage .text, .tile#s10 div.noimage .text {
    font-size: 2.6vw;
    line-height: 1.2em;
}

html.grid .tile > div.hasimage > video,
html.grid .tile > div.hasimage > img,
html.grid .tile > div.hasimage > iframe {
	max-width:100% !important;
	width: 100% !important;
	max-height:100% !important;
	height: 100% !important;
	position: absolute !important;
	top: 0;
	left: 0;
	object-fit:cover !important;
	object-position: center !important;
	transition: opacity 0.5s;
}
html.grid .tile > div.hasimage > video:hover,
html.grid .tile > div.hasimage > img:hover, 
html.grid .tile > div.hasimage > iframe:hover {
	opacity: 0.25;
}
html.grid .tile > div > span.serviceicon::before {
    font-size: 1.5em !important;
    margin: 0.3rem 0.3rem 0 0 !important;
}
html.flex .tile > div > span.serviceicon::before {
    font-size: 1.5em !important;
    margin: 20px 20px 0 0 !important;
}
#morebtn {background:  var(--flyp-background, black)!important; color: var(--flyp-text, white)!important;}