.frame {
	/* display: inline-block; */
	position: relative;
	width: 49.5%;
	height: 40vh;
	/* margin-left: 5%; */
	margin-top: 2.5%;
	overflow: hidden;
	cursor: pointer;
	border-radius: 20px;
	border:#000 5px solid;
	box-sizing: border-box; /* Evita cambios en el tamaño total */

	/* ANIMAR */
	opacity: 0;
    transform: translateX(-15%); /* Empuja el contenedor fuera de la pantalla (por defecto, desde la izquierda) */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;

	&:hover { border:#ac1e61 5px solid; }
}

/* Estilo para los contenedores que deben aparecer desde la derecha */
.frame.right {
    transform: translateX(15%); /* Empuja el contenedor fuera de la pantalla, desde la derecha */
}

/* Estilo para cuando el contenedor es visible */
.frame.visible {
    opacity: 1;
    transform: translateX(0); /* Cuando es visible, el contenedor se mueve a su posición */
}

.frame:hover .image {
	transform: scale(1.1);
	/* opacity: 1; */
}

.image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

/* MOSTRAR TEXTO CUANDO EL CURSOR ESTE ENCIMA DE LA IMAGEN */
.overlay {
	letter-spacing: 0.5em; /* Espaciado proporcional al tamaño de la fuente */
	padding-left: 0.5em; /* Ajuste fino para compensar la última letra */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.55);
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: bw_letter;
	/* font-size: 50%; */
	text-align: center;
	opacity: 1;
	transition: all 0.3s ease;
	font-size:2em;
	/* color:#f26d99; */
	color:#eee;
	/* color: #bebebe */
	/* backdrop-filter: blur(1px); */
}

.frame:hover .overlay {
	opacity: 0;
	/* color: #ff007a; */
}

/* @keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
} */

.container {
	/* display: grid; */
    /* grid-template-columns: 1fr 1fr; */
	width:95%;
	margin-left: 2.5%;
	/* margin-right: 2.5%; */
	margin-bottom: 5%;
	/* gap: 10px; */
	/* animation: fadeIn 4s ease-in-out; */
	/* justify-content: space-between; */
}

#uparticle {
	background-color:#b85777;
	/* margin-bottom: 5%; */
	font-size:150%;
	text-align: center;
	/* text-align: space-around; */
	border-radius: 20px;
	border:#222 6px solid;
	p {
		color: #bebebe;
		font-size: 80%
	}
}

#downarticle {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap:1%;

	/* grid-template-columns: 1fr 1fr; */
	/* Crea dos columnas iguales */
}

/* Para smartphones y tablets*/
@media (width <= 880px) {

	/* Cambio el eje de translate para que la animación sea vertical */
	.frame {
		width: 100%;
		height: 35vh;
		transform: translateY(15%);
	}

	.frame.right {
    	transform: translateY(15%);
	}

	.frame.visible {
    	transform: translateY(0);
	}

	/* .container {
		width: 90%;
        margin-left: 5%;
	} */

	#downarticle {
		grid-template-columns: 1fr;
	}
}

@media (width <= 580px) {
	.overlay {
		font-size: 1.6em;
		padding-left: 0.4em;
		letter-spacing: 0.4em;
	}
}