@import url("../../css/styles.css");

.comic-banner-1{
  background-image: url(../../images/COMICS/comic1.jpg);
  aspect-ratio: 2965/2199;
}

.comic-banner-2{
  background-image: url(../../images/COMICS/comic2.jpg);
  aspect-ratio: 2965/999;
}

.comic-banner-3{
  background-image: url(../../images/COMICS/comic3a.jpg);
  aspect-ratio: 2965/4032;
}

.comic-banner-4{
  background-image: url(../../images/COMICS/comic3b.jpg);
  aspect-ratio: 2965/4032
}

.comic-banner-5{
  background-image: url(../../images/COMICS/comic4a.jpg);
  aspect-ratio: 2965/1810;
}

.comic-banner-6{
  background-image: url(../../images/COMICS/comic4b.jpg);
  aspect-ratio: 2965/1810;
}


.spacer{
  grid-column: span 8;
  padding-top: var(--space-lg);
}

.cs-img , .comic-img , .comic-img-half{
  grid-column: span 8;
}

.case-intro{
  grid-column: span 8;
}

.cs-img-sq{
  grid-column: span 8;
}

.cs-video-sq{
  aspect-ratio: 1/1;
  overflow: hidden;
}

.cs-video-sq video , .cs-video-rec video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.objective-goals, .problem-statement , .process, .final-outcome{
  grid-column: span 8;
  margin-bottom: var(--space-xl);
}

.case-details{
  grid-column: span 8;
  margin-top: auto;
  gap: var(--space-xs);
}

.team, .links-container{
  width: 100%;
}

.links-container{
  margin-top: var(--space-lg);
}

.team .p1-mono{
  text-wrap: revert;
}

.client-name , .case-dscrpt{
  margin: 0px
}

.title-holder{
  margin-bottom: var(--space-xxl);
}

.objective-goals .p1 , .final-outcome .p1{
  grid-column: span 8;
}

.objective-goals .p2 , .problem-statement .p2 , .process .p2 , .final-outcome .p2{
  margin-top: var(--space-md);
}

.objective-goals li{
  margin-bottom: var(--space-sm);
  list-style: inside;
  text-wrap: balance;
}

.button-holder{
  grid-column: span 8;
}

.back-button{
  margin-bottom: var(--space-md);
  grid-column: span 4;
}

.back-button a{
  font-size: var(--space-md);
  margin-left: 0px;
  padding: 0px;

}
.button-holder{
  margin-top: var(--space-xl);
  width: 100%;
}

.previous-prj , .next-prj, .project-link{
  margin-left: 0px;
  padding: 0px;
}

.previous-prj {
  grid-column: 1 / span 4;
}

.next-prj{
  grid-column: 5 / span 4;
  text-align: right;
}

.prj-button:hover , .back-bttn:hover , .project-link:hover{
  text-decoration: underline;
  color: var(--pink)
}

/* TABLET */
@media only screen and (min-width: 768px) {
  .case-intro {
  grid-column: span 6;
  }
  
  .problem-statement , .objective-goals , .process{
    grid-column: span 6;
    gap: var(--space-xs);
    margin-bottom: var(--space-xl);
  }

  .back-button {
    grid-column: span 12;
  }

  .case-details , .final-outcome{
    grid-column: span 6;
  }

  .team, .links-container{
    width: 65%;
    gap: var(--space-xs);
    margin-left: auto;
    /* width: fit-content; */
    /* margin-bottom: var(--space-xl); */
  }

  .spacer{
    grid-column: span 12;
  }

  .cs-img ,  .comic-img{
    grid-column: span 12;
  }

  .stout-img{
    grid-column: span 4;
  }

  .unh-img{
    grid-column: span 3;
  }

  .problem-statement , .objective-goals , .process{
    margin-top: var(--space-xxl-lg);
    margin-bottom: var(--space-xxl-lg);
  }

  .cs-img-sq , .comic-img-half{
    grid-column: span 6;
  }

  .cag-video-landing{
    grid-column: span 12;
  }

  .button-holder{
    margin-top: var(--space-xl);
    grid-column: span 12;
  }

  .previous-prj {
    grid-column: 1 / span 4;
  }

  .next-prj{
    grid-column: 9 / span 4;
    text-align: right;
  }
}

/* DESKTOP */
@media only screen and (min-width: 1200px) {
  .back-button , .case-intro , .problem-statement , .final-outcome , .cs1-img{ 
    grid-column: 2 / span 5;
  }

  .case-details ,  .objective-goals , .process {
    grid-column: 7 / span 5;
  }

  .stout-img{
    grid-column: span 3;
  }
}

/* LARGE SCREEN */
@media only screen and (min-width: 1440px) {

}