/* tiles.css */

/* ... Tiles basics ...
-----------------------------------------------*/
.tiles {
  --size-h3: 1.4em;
  --height-h3: calc(var(--size-h3) * 1); /* the factor is the line-height of h3 */
  --gap-inside: .5em;

  --transition-duration-in: .3s;
  --transition-duration-out: calc(var(--transition-duration-in) / 1);

  --transition-delay-position: .15s;
  --transition-delay-opacity: calc(var(--transition-delay-position) / 2);
}
.tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--tiles-min-width), 1fr));
	gap: var(--inner-space-x);
	grid-template-rows: min-content;
}
.tiles_4_cols {
  --size-h3: 1em;
	grid-template-columns: repeat(auto-fit, minmax(calc(var(--tiles-min-width) * .8), 1fr));
}
.tiles .ce_text {
  isolation: isolate;
	display: flex;
	flex-direction: column;
 	justify-content: flex-start;
	gap: var(--gap-inside);
	aspect-ratio: 1;
	position: relative;
	margin: 0;
	padding: var(--gap-inside);
	padding-top: calc(100% - var(--gap-inside) - var(--height-h3));
	box-sizing: border-box;
  overflow: hidden;
	background-repeat: no-repeat;
	background-size: cover;
	transition: all var(--transition-duration-out) ease-out 0s;
}
.tiles .ce_text:hover {
  padding-top: var(--gap-inside);
  transition-timing-function: ease;
  transition-duration: var(--transition-duration-in);
  transition-delay: var(--transition-delay-position);
}
.tiles .ce_text::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(to bottom, transparent 65%, rgba(0 0 0 / .8));
  z-index: -1;
}
.tiles .ce_text:hover::after {
  background-image: linear-gradient(to bottom, rgba(0 0 0 / .7), rgba(0 0 0 / .7));
}
.tiles .ce_text:hover * {
  opacity: 1;
  transition-timing-function: ease;
  transition-duration: var(--transition-duration-in);
  transition-delay: var(--transition-delay-opacity);
}

.tiles h3 {
	color: #fff;
	font-size: var(--size-h3);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0;
	min-height: var(--height-h3);
	flex-grow: 1;
}
.tiles figure {
	margin: 0;
	order: 1;
}
.tiles img {
  visibility: hidden;
}
.tiles p {
	color: #fff;
	margin: 0;
	font-size: .9em;
	cursor: default;
	opacity: 0;
	transition: all var(--transition-duration-out) ease-out 0s;
}
.tiles_4_cols p {
	font-size: .7em;
}
.tiles a:is(:link, :visited, :hover, :active) {
  position: absolute;
  inset: 0;
}
/* ... Tiles basics ... END
-----------------------------------------------*/



/* ... Tiles extern ...
-----------------------------------------------*/
/* ... Tiles extern ... END
-----------------------------------------------*/