@import url("../../css/styles.css");
.cx-banner-1{
  background-image: url(../../images/CRUX/banner1.jpg);
  aspect-ratio: 2965/1483;
}

.cx-banner-2{
  background-image: url(../../images/CRUX/banner2.jpg);
  aspect-ratio: 2965/1808;
}

.cx-banner-3{
  background-image: url(../../images/CRUX/banner3.jpg);
  aspect-ratio: 2965/1483;}

.cx-img-poster1{
  background-image: url(../../images/CRUX/poster1.jpg);
  aspect-ratio: 1/1;
}

.cx-img-poster2{
  background-image: url(../../images/CRUX/poster2.jpg);
  aspect-ratio: 1/1;
}

.shit-banner-1{
  background-image: url(../../images/STASHIT/banner1.jpg);
  aspect-ratio: 5929/2965;
}

.shit-banner-2{
  background-image: url(../../images/STASHIT/banner2.jpg);
  aspect-ratio: 5929/3300;
}

.shit-banner-3{
  background-image: url(../../images/STASHIT/banner3.jpg);
  aspect-ratio: 5919/2885;
}

.shit-banner-4{
  background-image: url(../../images/STASHIT/banner4.jpg);
  aspect-ratio: 5929/2965;
}

.sea-banner-1{
  background-image: url(../../images/SEA/banner1.jpg);
  aspect-ratio: 5929/2965;  
}


.sea-banner-2{
  background-image: url(../../images/SEA/banner2.jpg);
  aspect-ratio: 5929/2964;  
}

.sea-img-process{
  background-image: url(../../images/SEA/process.jpg);
  aspect-ratio: 1/1; 
}

.stout-img-1{
  background-image: url(../../images/STOUT/eco_bingo.jpg);
}

.stout-img-2{
  background-image: url(../../images/STOUT/expedition_bingo.jpg);
}

.stout-img-3{
  background-image: url(../../images/STOUT/glow_bingo.jpg);
}

.stout-img-4{
  background-image: url(../../images/STOUT/grocery_bingo.jpg);
}

.stout-img-5{
  background-image: url(../../images/STOUT/makers_night.jpg);
}

.stout-img-6{
  background-image: url(../../images/STOUT/stout_proud.jpg);
}

.stout-img-7{
  background-image: url(../../images/STOUT/tie_dye.jpg);
}

.stout-img-8{
  background-image: url(../../images/STOUT/destination_karaoke.jpg);
}

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

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

.stout-img{
  grid-column: span 4;
  aspect-ratio: 1/1.55;
}

.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 !important;
  padding: 0px !important;
}

.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) {

}