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

.container {
  display: flex;
  height: 100%;
  width: 100%;
}
.container .column {
  flex: 1;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 32px;
  font-weight: bold;
  line-height: 50px;
  position: relative;
}
.container .column img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.container .column .name,
.container .column .title,
.container .column .contact {
  position: absolute;
}
.container .column.left {
  background-image: url("https://joningiberg.is/wp-content/themes/photos-wpcom/img/nordurljos-background.jpg");
  border-left: 50px solid black;
  border-top: 50px solid black;
  border-bottom: 50px solid black;
  color: white;
}
.container .column.left .title {
  z-index: 10;
  text-align: center;
  width: 200px;
  top: 44%;
  transform-origin: center left;
  transform: rotate(270deg) translate(-25px, 25px);
  left: -50px;
  top: 60%;
}
.container .column.left .name {
  position: absolute;
  padding-left: 50px;
  z-index: 10;
  top: -50px;
  left: -40px;
  height: 100%;
}
.container .column.left .contact {
  position: absolute;
  z-index: 10;
  left: 0;
  bottom: -50px;
  font-size: 12px;
}
.container .column.left .contact a {
  font-weight: 500;
  padding-right: 10px;
  color: white;
  text-decoration: none;
}
.container .column.right {
  background-image: url("https://joningiberg.is/wp-content/themes/photos-wpcom/img/vetrarsol-background.jpg");
  border-right: 50px solid white;
  border-top: 50px solid white;
  border-bottom: 50px solid white;
  color: black;
}
.container .column.right .title {
  z-index: 10;
  text-align: center;
  width: 50px;
  top: 44%;
  transform-origin: center left;
  transform: rotate(270deg) translate(-25px, 25px);
  right: -45px;
  top: 50%;
}
.container .column.right .name {
  position: absolute;
  padding-left: 50px;
  z-index: 10;
  bottom: -50px;
  right: 0px;
}
.container .column.right .contact {
  position: absolute;
  z-index: 10;
  left: 20px;
  top: -50px;
  font-size: 10px;
}
.container .column.right .contact a {
  font-weight: 500;
  padding-right: 10px;
  color: black;
  text-decoration: none;
}
@media only screen and (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  .container .column.left {
    border-right: 50px solid black;
    border-bottom: none;
  }
  .container .column.left .contact {
    transform-origin: center right;
    transform: rotate(270deg) translate(-25px, 25px);
    right: -310px;
    left: unset;
    top: 0;
  }
  .container .column.right {
    border-left: 50px solid white;
    border-top: none;
  }
}