:root {

  --perspective: 2500px;

  --open-speed: 1.5s;
}

* {
  box-sizing: border-box;;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 20px;

  height:100vh;
  background-color: #222222;
}

#koperhorst-backup {
  display: none;
  width: min(300px, 100vw);
}

#koperhorst,
.cardInside-right,
.cardInside-left {
  width: min(250px, 50vw);
}

.Card {
  position: relative;
  width: min(250px, 50vw);

  height: 330px;

  transform-style: preserve-3d;
	transform: perspective(var(--perspective));

  transition: 
    width var(--open-speed) linear;
}

.Card.open,
.Card:hover {
	transform: perspective(var(--perspective));
  width: min(500px, 100vw);
}

.cardFront,
.cardInside-left {
  position: absolute;
  right: 0;
}

.cardFront {
  background-color: #fff;
  height: 350px;
  /* aspect-ratio: 250 / 350; */

  overflow: hidden;
  transform-origin: left;
  box-shadow: inset 100px 20px 100px rgba(0,0,0,.13), 30px 0 50px rgba(0,0,0,0.1);
  transition: var(--open-speed);
}

#koperhorst {
  position: relative;
  width: min(250px, 50vw);
  /* aspect-ratio: 250 / 350; */
  height: 350px;
}

.cardInside-right img {
  width: 200px;
  margin: 7px;
}

.cardInside-left {
  background-color: #fff;
  height:350px;
  z-index:-1;
  top:0;
  box-shadow: inset 100px 20px 100px rgba(0,0,0,0.2);
}

.inside-text {
  position: relative;
  height: 350px;
  top: 0;

  padding: 20px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


.Card.open .cardFront,
.Card:hover .cardFront {
  transform: rotateY(-160deg); 
  z-index: -4;
}

.Card.open #koperhorst,
.Card:hover #koperhorst {
  display: none;
}

.Card.open .cardInside-right,
.Card:hover .cardInside-right {
  transform: rotateY(-160deg); 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 350px;
}

h1 {
  text-align: center;
  font-size: 30px;
  font-weight: 500;
}

h2 {
  text-align: left;
  font-size: 16px;
  font-weight: 500;

  margin: 0;
}

h3 {
  text-align: center;
  font-size: 16px;
  font-weight: 500;

  margin: 0;
}