/* =============================== */
/* =========== PROJECT =========== */
/* =============================== */

.project {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;

  grid-template-areas:
    "header"
    "video"
    "content"
    /*"github"
    "doi"*/
    "links"
    "more"
    "panel";

  margin-bottom: 5vmin;
  background-color: rgba(0,0,0,0.8);
  overflow: hidden;
  overflow-wrap: break-word;
}

.project>h2, .project>p, .project>.links {
  padding: 0 5vmin;
  margin: 0 0 2vmin 0;
}

.project > p {
  margin: 3vmin 0;
}

.project>h2 {
  margin: 2vmin 0;
  grid-area: header;
}

.project>.video {
  grid-area: video;
  margin:0;
  padding: 0;
}

.project>p {
  grid-area: content;
}

.project > .links {
  grid-area: links;
}
.links > a {
  display: block;
}

/* BUTTON */

.project>button {
  grid-area: more;

  background-color: rgba(255,255,255,0.05);
  color: rgba(255,255,255,1);
  cursor: pointer;
  padding: 1.5vmin 5vmin;
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  transition: 0.4s;
}

.accordion:hover {
  background-color: rgba(255,255,255,0.1);
}

.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px;

  position: relative;
  left: -50%;
}

.accordion.active:after {
  content: '\2212';
}

/* SUB CONTENT */

.project>.panel{
  grid-area: panel;

  place-self: center;

  width: clamp(0px,100%,700px);

  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.panel_content {
  display: grid;
  grid-template-columns: 1fr minmax(10px,1fr);
  grid-template-rows: auto;

  margin: 5vmin 0;
}

.panel_content>* {
  /*margin: 5vmin 0;*/
  padding: 0 5vmin;
}

.panel_content>img{
  grid-area: 1 / 2 / 5 / 3;
  place-self: center;
  /*object-fit: cover;*/
  /*width: 100%;*/
  max-height: 45vh;
  /*padding: 5vmin 0;*/
  margin: 0;
}


@media only screen and (min-width: 1000px) {
  .project {
    grid-template-columns: 1fr 1fr;
  }
  .project:nth-child(even) {
    grid-template-areas:
      "video header"
      "video content"
      "video links"
      /*"video doi"*/
      "video more"
      "panel panel";
  }
  .project:nth-child(odd) {
    grid-template-areas:
      "header video"
      "content video"
      "links video"
      /*"github video"
      "doi video"*/
      "more video"
      "panel panel";
  }
  .project>h2, .project>p, .project>a {
    padding: 0 5vmin;
    margin: 0 0 1vmin 0;
  }
  .project > h2 {
    margin: 2vmin 0 0 0;
  }
  .project > button {
    padding: 0vmin 5vmin;
    margin: 0;
  }
  .project > .video {
    padding: 0;
    margin: 0;
  }
}