body {
  font: 1em sans-serif;
  text-align: center;
  padding:1em;
}

.deko {
 text-align: left;
 max-width: 640px;
 margin: auto;
}

.more { margin-top: 1em }
.more a { margin: 1em 2em }

.proto {
  display: inline-block;
  vertical-align: top;
  max-width: 300px;
  padding: .5em;
}

.proto img {
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 300px;
  max-width: 100%;
  border:1px solid gray;
}

* {
  font-size: .9rem;
  padding:0;
  margin:0;
}


a:hover {
  color: pink;
  opacity: .6;
}

a img:hover {
  opacity: .6;
}

a { 
  color: black;
}

img {
  max-width: 100%;
}

.p {
  position: relative;
  display: block;
  width: fit-content;
  margin: auto;
}

.p a { font-size:0px }

.p img {
  width: 100%;
  max-width: 1080px;
}

.p a {
  position: absolute;
  top: 0;
  height: 100%;
  width: 50%;
}

.p .left {
  left: 0;
  cursor: w-resize;
}

.p .right {
  right: 0;
  cursor: e-resize;
}

@media (prefers-color-scheme: dark) {

body {
  background: #2a2a2a;
  color: antiquewhite;
}

a { 
  color: antiquewhite;
}

}

@media only screen and (max-width: 860px) {
body { padding: .3em }
.proto { max-width: 31%; padding:0 }
 
}