section_seven.css

#wrapper_seven .content{
    grid-area: "content";
    display: grid;
    width: 100%;
    margin-top: 10px;
    column-gap: 3vw;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 90%;
    grid-template-areas:
    "scene_1 scene_2 scene_3 scene_4";
}

#scene_1 {
    grid-area: scene_1;
}

#scene_2 {
    grid-area: scene_2;
}

#scene_3 {
    grid-area: scene_3;
}

#scene_4 {
    grid-area: scene_4;
}

.scene {
    perspective: 600px;
}

.card {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 1s;
    transform-style: preserve-3d;
    cursor: pointer;
    opacity: 0;
  }

  .card__face {
    position: absolute;
    height: 100%;
    width: 100%;
    backface-visibility: hidden;
    border-radius: 20px;
  }

  @keyframes flip {
    0%   {transform: rotateY(-90deg);
          opacity: 0;}
    50% {opacity: 100;}
    100% {transform: rotateY(0deg);
      opacity: 100;
    }
  }

  /* ---------- card front ---------- */

  .card__face--front {
    background: linear-gradient(360deg, rgba(47,58,90,1) 0%, rgba(70,81,114,1) 100%);
    display: grid;
    width: 100%;
    column-gap: 50px;
    grid-template-columns: 100%;
    grid-template-rows: 10vh auto;
    grid-template-areas:
    "object"
    "object_pic";
  }

  .object {
    grid-area: object;
    margin-left: 2.5vw;
    align-self: center;
  }

  .object_pic {
    grid-area: object_pic;
    width: 10vw;
    height: auto;
    align-self: end;
    justify-self: end;
    margin-bottom: 1.5vh;
    margin-right: 0.75vw;
  }

  .object_pic, .object_pic_small img {
    filter: drop-shadow(0px 0px 5px rgb(44, 255, 234, 0.6));
  }

  /* ---------- card back ---------- */
  
  .card__face--back {
    background:#465172;;
    transform: rotateY( 180deg );
    display: grid;
    width: 100%;
    grid-template-columns: 9vh auto;
    grid-template-rows: auto auto;
    grid-template-areas:
    "object_pic_small object_liter"
    "object_description object_description";
  }

  .object_pic_small {
      grid-area: object_pic_small;
      justify-self: center;
      margin-left: 2vh;
      margin-top: 2vh;
  }

  .object_liter {
      grid-area: object_liter;
      margin-top: 3vh;
      margin-left: 8px;
  }

  .object_liter h2 {
      line-height: 20pt;
      color:#2CFFEA;
      margin-bottom: 0;
  }

  .object_liter p {
      margin-top: 0px;
  }

  .object_description {
    grid-area: object_description;
    align-self: end;
    justify-self: center;
    margin-bottom: 2vh;
    width: 80%;
}

  /* ---------- card flip ---------- */

  .card.is-flipped {
    transform: rotateY(-180deg);
  }