/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: gray;
}

body {
  font-family: sans-serif;
  background: #fff;
}

/* Layout principal: 2 columnas */
.layout {
  display: flex;
  height: 100vh; /* ocupa toda la pantalla */
}

/* Columna izquierda (50% ancho) */
.left {
  flex: 1; /* mitad izquierda */
  display: flex;
  flex-direction: column;
}

/* Parte superior izquierda (65% alto) */
.top-left {
  flex: 65;
}

.top-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Parte inferior izquierda (35% alto con 2 imágenes) */
.bottom-left {
  flex: 35;
  display: flex;
}

.bottom-left img {
  flex: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Columna derecha (50% ancho) */
.right {
  flex: 1;
}

.right img {
  width: 100%;
  height: 150%;
  object-fit: cover;
}

/* 📱 Responsive: en móviles se apilan */
@media (max-width: 768px) {
  .layout {
    flex-direction: column;
    height: auto;
  }

  .left,
  .right {
    flex: none;
    width: 100%;
  }

  .top-left,
  .bottom-left {
    flex: none;
    height: auto;
  }

  .bottom-left {
    flex-direction: column;
  }

  .bottom-left img {
    height: auto;
  }
}