[data-scroll] {
	will-change: transform;
}



.content {
	display: flex;
	flex-direction: column;
	position: relative;
	align-items: center;
	padding: 12rem 0;
	counter-reset: figure;
}

.item {
	margin: 0vh auto;
	padding: 0;
	max-width: 100%;
	position: relative;
	will-change: transform;
}

.item::before {
/*
	counter-increment: figure;
	content: counter(figure, decimal-leading-zero);
 */
	position: absolute;
/* 	font-family: paralucent, sans-serif; */
/* 	font-size: 10rem; */
/* 	color: var(--color-deco); */
/* 	bottom: calc(100% - 3rem); */
}

.item:nth-child(even)::before {
	right: 0;
}

.item__img-wrap {
	--aspect-ratio: 1/1.5;
	overflow: hidden;
	width: 500px;
	margin: 0 auto;
	padding-bottom: calc(100% / (var(--aspect-ratio)));
	max-width: calc(100% - 2rem);
	will-change: transform;
}




.item__img {
	--overflow: 40px;
	height: calc(100% + (2 * var(--overflow)));
	top: calc( -1 * var(--overflow));
	width: 100%;
	position: absolute;
	background-image: var(--image);
	background-size: cover;
	background-position: 50% 0%;
	will-change: transform;
}

.item__img--t1 {
	--aspect-ratio: 8/10;
	--overflow: 60px;
	--image: url(/images/demo-foto-1.jpg);
}

.item__img--t2 {
	--aspect-ratio: 120/76;
	--overflow: 80px;
	--image: url(/images/demo-foto-2.jpg);
}

.item__img--t3 {
	--aspect-ratio: 60/75;
	--overflow: 120px;
	--image: url(/images/demo-foto-3.jpg);
}

.item__img--t6 {
	--aspect-ratio: 1687/1076;
	--overflow: 120px;
	--image: url(/images/demo-foto-6.jpg);
}

.item__caption {
	padding: 2rem 1rem;
}




.round-button {
  width: 100px;
  height: 100px;
}
.round-button-circle {
  width: 100%;
  height:0;
  padding-bottom: 100%;
  border-radius: 50%;
  border:0px;
  overflow:hidden;

	padding-top: 50%;
	padding-bottom: 50%;
	line-height: 1em;
	margin-top: -0.5em;
	text-align: center;
	color: #e2eaf3;
	font-family: Verdana;
	font-size: 0.9em;
	font-weight: normal;
	text-decoration: none;
	font-style: default;
	font-variant: normal;
  background: #166e89;
}
/* .round-button-circle:hover { color: #ffffff; } */
.round-button a
{
	display: block;
	float: left;
	width: 100%;
	padding-top: 50%;
	padding-bottom: 50%;
	line-height: 1em;
	margin-top: -0.5em;
	text-align: center;
	color: #e2eaf3;
	font-family: Verdana;
	font-size: 0.9em;
	font-weight: normal;
	text-decoration: none;
	font-style: default;
	font-variant: normal;
}
.round-button-circle:hover
{
box-shadow: inset 0 0 0 10em rgba(255, 255, 255, 0.1);
}

.bg-yellow
{
	background: #f4e067;
}
.bg-purple
{
	background: #c983b6;
}
.bg-orange
{
	background: #ef763a;
}
.bg-blue
{
	background: #166e89;
}
.bg-green
{
	background: #6f7f46;
}
.bg-beige
{
	background: #aa8557;
}


.button-yellow
{
	background: #f4e067;
}

.button-purple
{
	background: #c983b6;
}

.button-orange
{
	background: #ef763a;
}

.button-green
{
	background: #6f7f46;
}

.button-dark
{
	color:#ffffff;
  	background: #000000;
}



[data-bs-theme="dark"] {
	.bg-yellow,
	.bg-purple,
	.bg-orange,
	.bg-blue,
	.bg-green,
	.bg-beige

	{
		background: #333333;
	}


  }
}