/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 01 2025 | 13:23:05 */
.stack {
	--card-height: 40vw;
	--card-margin: 4vw;
	--card-top-offset: 1vh;
	--numcards: 5;
	--outline-width: 0px;
    width: 80vw;
	margin: 0 auto;
	padding-bottom: -20vh;
}
@media (max-width: 1024px) {
  .stack {
    display: none !important;
  }
}

#cards {
	padding-bottom: calc(var(--numcards) * var(--card-top-offset)); 
	margin-bottom: var(--card-margin); 
}

.card {
	position: sticky;
	top: 15vh;
	padding-top: var(--card-top-offset);
	transform-origin: 50% 0%;
	will-change: transform;
}

/** PAGE STYLING **/

#cards {
	list-style: none;
	outline: calc(var(--outline-width) * 10) solid blue;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(var(--numcards), var(--card-height));
	gap: var(--card-margin);
}

.card {
	outline: var(--outline-width) solid hotpink;
}

.card__content {
	box-shadow: 0 0.2em 1em rgba(0, 0, 0, 0.1), 0 1em 2em rgba(0, 0, 0, 0.1);
	background: #05c2fb;
	height: 70vh;
	border-radius: 1em;
	overflow: hidden;

	display: grid;
	grid-template-areas: "text img";
	grid-template-columns: 1fr 0.8fr;
	grid-template-rows: auto;

	align-items: stretch;
	outline: var(--outline-width) solid lime;
}

.card__content > div {
	grid-area: text;
	width: 80%;
	place-self: center;
	text-align: left;

	display: grid;
	gap: 1em;
	place-items: start;
}

.card__content > figure {
  grid-area: img;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.card__content > figure > img {
	width: 60%;
	height: auto;
}