.img-box {
border: 1px solid #ffffff;
position: relative;
}

.img-box:hover .transparent-box {
background-color: rgba(0, 0, 0, 0.6);
}

.img-box:hover .caption {
transform: translateY(-5px);
}



.caption {
color: white;
transition: transform 0.3s ease, opacity 0.3s ease;
font-size: 1.5rem;
}

.transparent-box {
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
left: 0;
transition: background-color 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
}

.main-photo {
grid-row: 1;
grid-column: 1;
}

.sub {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 0em;
}

.sub:nth-child(0) {
grid-column: 1;
grid-row: 1;
}

.sub:nth-child(1) {
grid-column: 2;
grid-row: 1;
}

.sub:nth-child(2) {
grid-column: 1;
grid-row: 2;
}

.sub:nth-child(3) {
grid-column: 2;
grid-row: 2;
}

/* Accesibilidad: ocultar elementos */
.hide-element {
border: 0;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}

/* Responsive ajustes */
@media (max-width: 580px) {
.photos-grid-container {
grid-template-columns: 1fr;
}
}

.photos-grid-container {
display: grid;
grid-template-columns: 1fr 1fr; /* izquierda y derecha */
/*  grid-template-rows: 1fr 1fr; /* dos filas iguales */*/
gap: 0;
height: 100%;
}

@media (max-width: 580px) {
	
	
.photos-grid-container {
display: block;
}
}

/* Foto grande a la izquierda ocupando 2 filas */
.main-photo {
grid-row: span 2;
grid-column: 1;
overflow: hidden;
}

.main-photo img {
width: 100%;
height: 100%;
object-fit: cover; /* recorta y mantiene proporción */
object-position: center;
display: block;
}

/* Miniaturas en la derecha */
.sub {
display: grid;
grid-template-columns: 1fr 1fr; /* 2 columnas */
grid-template-rows: 1fr 1fr; /* 2 filas */
gap: 0;
height: 100%;
}

.sub .img-box {
overflow: hidden;
aspect-ratio: 1 / 1; /* cuadradas */
}

.sub .img-box img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}

/* Hover */
.img-box:hover .transparent-box {
background-color: rgba(0, 0, 0, 0.6);
}

.img-box:hover .caption {
transform: translateY(-5px);
}

/* Overlay de texto */
.transparent-box {
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
left: 0;
transition: background-color 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
}

.caption {
color: white;
font-size: 1.5rem;
transition: transform 0.3s ease, opacity 0.3s ease;
}


.main-photo {
grid-row: auto;
}