/*
Block: Tiles
Last updated: 26/11/2024
*/

.wp-block-acf-tiles {
	border-radius: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	aspect-ratio: unset !important;
}

.wp-block-acf-tiles .tile.item {
	display: block;
	position: relative;
	overflow: hidden;
	transition: var(--time);
}

.wp-block-acf-tiles .is-style-text-inside .tile.item {
}

.wp-block-acf-tiles .is-style-text-outside .tile-titles {
	margin-top: 1.5rem;
}

.wp-block-acf-tiles .tile-titles h1,
.wp-block-acf-tiles .tile-titles h2,
.wp-block-acf-tiles .tile-titles h3,
.wp-block-acf-tiles .tile-titles h4,
.wp-block-acf-tiles .tile-titles h5,
.wp-block-acf-tiles .tile-titles h6,
.wp-block-acf-tiles .tile-titles p {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.wp-block-acf-tiles .is-style-text-inside .tile-titles {
	width: 100%;
    position: absolute;
    top: 0;
    left: 0;
	margin-top: 0;
	margin-bottom: 0;
	padding: 1rem;
	z-index: 2;
}

.wp-block-acf-tiles.is-vertically-aligned-center .is-style-text-inside .tile-titles {
	width: 100%;
    position: absolute;
	top: 50%;
	transform: translateY(-50%);
}

.wp-block-acf-tiles.is-vertically-aligned-bottom .is-style-text-inside .tile-titles {
	width: 100%;
    position: absolute;
	top: unset;
	bottom: 0;
}

.wp-block-acf-tiles .tile.item:before {
	content: '';
	aspect-ratio: 1;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	transition: var(--time);
	z-index: 1;
}

.wp-block-acf-tiles .is-style-text-inside .tile.item .tile-media,
.wp-block-acf-tiles .is-style-text-inside .tile.item:before {
	height: 100%;
}

.wp-block-acf-tiles .is-style-text-outside .tile.item .tile-media {
	transform: scale(1);
	transition: var(--time);
	transform-origin: bottom;
}

.wp-block-acf-tiles .tile.item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	height: auto;
}

.wp-block-acf-tiles .tile.item .tile-media.cover {
	width: 100%;
	object-fit:cover;
}
.wp-block-acf-tiles .tile.item .tile-media.contain {
	width: 100%;
	/*height: 100%;*/
	object-fit:contain;
}


.wp-block-acf-tiles .is-style-text-inside .tile.item .tile-media {
	transform: scale(1);
	transition: var(--time);
	transform-origin: center;
}

.wp-block-acf-tiles .tile.item:hover .tile-media {
	transform: scale(1.1);
}

.wp-block-acf-tiles .items-wrap.is-style-text-outside .item {
	aspect-ratio: unset;
	overflow: visible !important;
}

.wp-block-acf-tiles .items-wrap.is-style-text-outside .item:hover .tile-media {
	transform: scale(1) !important;
}

.wp-block-acf-tiles h1 + h1,
.wp-block-acf-tiles h1 + h2,
.wp-block-acf-tiles h1 + h3,
.wp-block-acf-tiles h1 + h4,
.wp-block-acf-tiles h1 + h5,
.wp-block-acf-tiles h1 + h6,
.wp-block-acf-tiles h1 + p {
	margin-top: 0 !important;
}

.wp-block-acf-tiles h2 + h1,
.wp-block-acf-tiles h2 + h2,
.wp-block-acf-tiles h2 + h3,
.wp-block-acf-tiles h2 + h4,
.wp-block-acf-tiles h2 + h5,
.wp-block-acf-tiles h2 + h6,
.wp-block-acf-tiles h2 + p {
	margin-top: 0 !important;
}

.wp-block-acf-tiles h3 + h1,
.wp-block-acf-tiles h3 + h2,
.wp-block-acf-tiles h3 + h3,
.wp-block-acf-tiles h3 + h4,
.wp-block-acf-tiles h3 + h5,
.wp-block-acf-tiles h3 + h6,
.wp-block-acf-tiles h3 + p {
	margin-top: 0 !important;
}

.wp-block-acf-tiles h4 + h1,
.wp-block-acf-tiles h4 + h2,
.wp-block-acf-tiles h4 + h3,
.wp-block-acf-tiles h4 + h4,
.wp-block-acf-tiles h4 + h5,
.wp-block-acf-tiles h4 + h6,
.wp-block-acf-tiles h4 + p {
	margin-top: 0 !important;
}

.wp-block-acf-tiles h5 + h1,
.wp-block-acf-tiles h5 + h2,
.wp-block-acf-tiles h5 + h3,
.wp-block-acf-tiles h5 + h4,
.wp-block-acf-tiles h5 + h5,
.wp-block-acf-tiles h5 + h6,
.wp-block-acf-tiles h5 + p {
	margin-top: 0 !important;
}

.wp-block-acf-tiles h6 + h1,
.wp-block-acf-tiles h6 + h2,
.wp-block-acf-tiles h6 + h3,
.wp-block-acf-tiles h6 + h4,
.wp-block-acf-tiles h6 + h5,
.wp-block-acf-tiles h6 + h6,
.wp-block-acf-tiles h6 + p {
	margin-top: 0 !important;
}

.wp-block-acf-tiles p + h1,
.wp-block-acf-tiles p + h2,
.wp-block-acf-tiles p + h3,
.wp-block-acf-tiles p + h4,
.wp-block-acf-tiles p + h5,
.wp-block-acf-tiles p + h6,
.wp-block-acf-tiles p + p {
	margin-top: 0 !important;
}