/* Crello templates grid 2 */

.crello-templates-grid-2-wrapper,
.crello-templates-grid-3-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-gap: 1em 1em;
	grid-auto-flow: row dense;
}

.crello-templates-grid-2-wrapper .template {
	border-radius: 8px;
	position: relative;
	overflow: hidden;
}

.crello-templates-grid-2-wrapper.no-maxheight .template {
	max-height: none;
}

.crello-templates-grid-3-wrapper .template {
	border-radius: 8px;
	position: relative;
	min-height: 168px;
	overflow: hidden;
}

.crello-templates-grid-2-wrapper .template .button,
.crello-templates-grid-3-wrapper .template .button {
	display: none;
}

.crello-templates-grid-2-wrapper .template:hover .button,
.crello-templates-grid-2-wrapper .template.last-blue .button,
.crello-templates-grid-3-wrapper .template:hover .button,
.crello-templates-grid-3-wrapper .template.last-blue .button {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	background: linear-gradient(0deg, rgba(33, 83, 204, 0.63), rgba(33, 83, 204, 0.63));
	border-radius: 8px;
}

.crello-templates-grid-2-wrapper .template.last-blue .button,
.crello-templates-grid-3-wrapper .template.last-blue .button {
	background: #2153CC;
}

.crello-templates-grid-2-wrapper.last-no-bg .template.last-blue .button,
.crello-templates-grid-3-wrapper.last-no-bg .template.last-blue .button {
	background: none;
}

.crello-templates-grid-2-wrapper.hover-gray .template:hover .button,
.crello-templates-grid-3-wrapper.hover-gray .template:hover .button {
	background: rgba(0,0,0,.6);
}


.crello-templates-grid-2-wrapper.hover-gray .template.last-blue .button,
.crello-templates-grid-3-wrapper.hover-gray .template.last-blue .button {
	background: #F8F8F9;
}


.crello-templates-grid-2-wrapper .template:hover .button a,
.crello-templates-grid-2-wrapper .template.last-blue .button a,
.crello-templates-grid-3-wrapper .template:hover .button a,
.crello-templates-grid-3-wrapper .template.last-blue .button a {
	position: relative;
	top: calc(50% - 20px);
	background: #FFDE4E;
	border-radius: 8px;
	padding: 10px 24px;
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	text-decoration: none;
	color: #121316 !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 80%;
	display: inline-block;
}

.crello-templates-grid-2-wrapper.hover-gray .template:hover .button a,
.crello-templates-grid-3-wrapper.hover-gray .template:hover .button a {
	background-color: transparent;
	border: 2px solid #FFFFFF;
	color: #FFF !important;
}

.crello-templates-grid-2-wrapper.hover-gray .template.last-blue .button a,
.crello-templates-grid-3-wrapper.hover-gray .template.last-blue .button a {
	background: transparent;
	color: #2153CC !important;
	border: 2px solid #2153CC;
}

.crello-templates-grid-2-wrapper .template.large,
.crello-templates-grid-3-wrapper .template.large {
	grid-column: auto / span 2;
	grid-row: auto / span 2;
}

.crello-templates-grid-2-wrapper .template img,
.crello-templates-grid-2-wrapper .template video {
	width: 100%;
	border-radius: 8px;
	height: 100%;
	object-fit: cover;
}

.crello-templates-grid-3-wrapper .template img,
.crello-templates-grid-3-wrapper .template video {
	width: 100%;
	border-radius: 8px;
	position: absolute;
	height: auto;
}

@media screen and (max-width: 768px) {

	.crello-templates-grid-2-wrapper,
	.crello-templates-grid-3-wrapper {
		grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-gap: 1em 1em;
		grid-auto-flow: row dense;
	}

	.crello-templates-grid-2-wrapper .template.large-tablet,
	.crello-templates-grid-3-wrapper .template.large-tablet {
		grid-column: auto / span 2;
		grid-row: auto / span 2;
	}

	.crello-templates-grid-2-wrapper .template.large,
	.crello-templates-grid-3-wrapper .template.large {
		grid-column: auto / span 1;
		grid-row: auto / span 1;
	}

	.crello-templates-grid-2-wrapper .template.last-blue .button a,
	.crello-templates-grid-3-wrapper .template.last-blue .button a {
		padding: 10px 12px;
	}

}

@media screen and (max-width: 414px) {

	/* Crello templates grid 2 */

	.crello-templates-grid-2-wrapper,
	.crello-templates-grid-3-wrapper {
		grid-template-columns: 1fr 1fr;
		grid-gap: 1em 1em;
	}

	.crello-templates-grid-2-wrapper .template.large,
	.crello-templates-grid-3-wrapper .template.large {
	    grid-column: auto / span 1;
	    grid-row: auto / span 1;
	}

	.crello-templates-grid-2-wrapper .template.large-tablet,
	.crello-templates-grid-3-wrapper .template.large-tablet {
		grid-column: auto / span 1;
		grid-row: auto / span 1;
	}

}