.doriangray {
  width: 540px;
  height: 350px;
  border: var(--bodyborder1);
  outline: var(--bodyborder2);
  margin: var(--widthborder2);
  background: var(--bckg1);
}

.doriangray br { display:none; }
.doriangray .dgtext br { display:block; }

.doriangray .dgbody {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 540px;
  height: 350px;
  position: relative;
}

.doriangray::selection,
.doriangray *::selection {
  background: var(--accent1);
  color: var(--selectiontext);
}

.doriangray input {
  display: none;
}

.doriangray .dgbody > div {
  height: 350px;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.doriangray .dg1 {
  width: 250px;
  overflow: hidden;
  flex-shrink: 0;
  clip-path: polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%, 100% 50%);
  transition: ease 1s;
}

.doriangray .dg2 {
  flex-direction:column;
  flex-grow: 1;
  background: var(--bckg1);
  position: relative;
  overflow: hidden;
  z-index: 2;
}

.doriangray .dgbody:before {
  content: "";
  display: block;
  position: absolute;
  border: var(--border1);
  z-index: 0;
  width: 558px;
  height: 368px;
  top: -10px;
  left: -10px;
}

.doriangray .dg1 img {
  width: 250px;
  height: 350px;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

.doriangray .dg2 .dgtitle {
  text-align: center;
  margin: 20px;
  width: 110px;
  max-height: 50%;
  overflow: hidden;
  transition: 1s ease;
  position:relative;
  top:0;
  transition:ease 1s;
}

.doriangray .dg2 .dgtitle h {
  font: 30px "UnifrakturCook";
  display: block;
  color: var(--title1);
  line-height: 25px;
}

.doriangray .dg2 .dgtitle m {
  display: block;
  font: 8px "Overpass Mono";
  text-transform: uppercase;
  font-weight: 700;
  color: var(--title2);
  line-height: 10px;
  text-align: justify;
  text-align-last: justify;
}

.doriangray .dg2 .dgtext {
  margin: 20px 15px 20px 20px;
  padding-right: 5px;
  overflow: auto;
  position: absolute;
  bottom: -265px;
  height: 245px;
  font: 11px "Roboto";
  text-align: justify;
  line-height: 17px;
  transition: 1s ease;
}

.doriangray .dg2 .dgtext strong, .doriangray .dg2 .dgtext b {
  font:11px 'Overpass Mono';
  font-weight:700;
}

.doriangray .dg2 .dgtext i, .doriangray .dg2 .dgtext em, .doriangray .dg2 .dgtext a {
  color:var(--accent1);
}

.doriangray .dg2 .dgtext::-webkit-scrollbar {
  width:1px;
}

.doriangray .dg2 .dgtext::-webkit-scrollbar-thumb {
  background:var(--accent1);
}

.doriangray .dg2 .dgtext::-webkit-scrollbar-track {
  background:var(--bckg1);
}

.doriangray label {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background: var(--bckg2);
  border: var(--border2);
  position: absolute;
  transition: ease 1s;
  right: 10px;
  bottom: 10px;
  border-radius: 0;
  z-index:2;
  width: 25px;
  height: 25px;
}

.doriangray label:before {
  content: "\f06e";
  font: 10px "Font Awesome 5 Free";
  color: var(--accent1);
}

.doriangray input:checked ~ .dg1 {
  width: 150px;
  clip-path: polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%, 80% 50%);
}

.doriangray input:checked ~ .dg2 .dgtext {
  bottom: 0;
}

.doriangray input:checked ~ .dg2 .dgtitle {
  width: 80%;
  top:-135px;
}

.doriangray input:checked ~ label {
  right: 380px;
  bottom: 160px;
  margin: 0;
  border-radius: 100%;
}

.doriangray input:checked ~ label:before {
  content: "\f070";
}

.ncredit {
  width: 400px;
  text-align: center;
  margin: 0 auto;
  display: block;
  font-size: 10px;
  text-decoration: none;
  font: 8px verdana;
  color: #aaa;
}
.doriangray + br + .ncredit {
  margin-top: -15px;
}
.ncredit:before {
  content: "©";
}