<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
<style>
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
}

div {
  width: 50%;
  height: 50%;
  float: left;
}

div:nth-of-type(1) {
  background: #ccc;
}

div:nth-of-type(2) {
  background: #bbb;
  /* border-left: 2px solid #00f; */
}

div:nth-of-type(3) {
  background: #aaa;
  /* border-top: 2px solid #00f; */
}

div:nth-of-type(4) {
  background: #ddd;
  /* border-top: 2px solid #00f; */
  /* border-left: 2px solid #00f; */
}

img {
  width: 100%;
  height: 100%;
}
</style>
</head>
<body>
<div>
  <a href="{{ url_for('camera_1x1') }}">
    <img src="{{ url_for('camera_1x1') }}" alt="Camera 1">
  </a>
</div>
<div>
  <a href="{{ url_for('camera_1x2') }}">
    <img src="{{ url_for('camera_1x2') }}" alt="Camera 2">
  </a>
</div>
<div>
  <a href="{{ url_for('camera_2x1') }}">
    <img src="{{ url_for('camera_2x1') }}" alt="Camera 3">
  </a>
</div>
<div>
  <a href="{{ url_for('camera_2x2') }}">
    <img src="{{ url_for('camera_2x2') }}" alt="Camera 4">
  </a>
</div>
</body>
</html>
