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

.cx-banner-1{
  background-image: url(../../images/CRUX/banner1.jpg);
  aspect-ratio: 2/1;
  margin-top: var(--space-lg);
}

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

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

.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;
}

.cx-banner-4{
  background-image: url(../../images/CRUX/banner4.jpg);
  aspect-ratio: 2.04/1;
}

.shit-banner-1{
  background-image: url(../../images/STASHIT/banner1.jpg);
  aspect-ratio: 2.35/1;
  margin-top: var(--space-lg);
}

.shit-img-user{
  background-image: url(../../images/STASHIT/user1.jpg);
  aspect-ratio: 1/1;
}

.shit-img-branding{
  background-image: url(../../images/STASHIT/color-palette.jpg);
  aspect-ratio: 1/1;
}

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

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

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

.sea-banner-1{
  background-image: url(../../images/SEA/banner1.jpg);
  aspect-ratio: 2.35/1;
  margin-top: var(--space-lg);
}

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

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

.twg-banner-1{
  background-image: url(../../images/TWG/banner1.jpg);
  aspect-ratio: 2.35/1;
  margin-top: var(--space-lg);}

.twg-banner-2{
  background-image: url(../../images/TWG/banner2.jpg);
  aspect-ratio: 1.796/1;
}

.twg-banner-3{
  background-image: url(../../images/TWG/banner3.jpg);
  aspect-ratio: 1.796/1;
}

.twg-banner-4{
  background-image: url(../../images/TWG/banner4.jpg);
  aspect-ratio: 1.796/1;
}

.cag-img-1{
  background-image: url(../../images/CAG/bc.jpg);
  aspect-ratio: 1/1;
}

.cag-img-2{
  background-image: url(../../images/CAG/sign.jpg);
  aspect-ratio: 1/1;
}

.cag-banner-1{
  background-image: url(../../images/CAG/table.jpg);
  aspect-ratio: 2.05/1;
}

.cag-img-3{
  background-image: url(../../images/CAG/tent.jpg);
  aspect-ratio: 1/1;
}

.cag-img-4{
  background-image: url(../../images/CAG/displayboard.jpg);
  aspect-ratio: 1/1;
}

.cag-video-landing{
  aspect-ratio: 2/1;
  grid-column: span 8;
}

.unh-graphic-1{
  background-image: url(../../images/UNH/Teen_Rehab_Addiction.png);
  aspect-ratio: 25/35.2;
}

.unh-graphic-2{
  background-image: url(../../images/UNH/UNH_HillsidesCares_Infographic_Schedule-for-a-Teen-IOP-Day.png);
  aspect-ratio: 15/32;
}

.unh-graphic-3{
  background-image: url(../../images/UNH/UNH_Magnolia_Arbors-Ivy_Infographic_A-timeline-for-planning-memory-care.png);
  aspect-ratio: 1/2.56;
}

.unh-graphic-4{
  background-image: url(../../images/UNH/UNH_Rockland-Recovery_Infographic_Day-by-day-PHP-schedule-for-adults.png);
  aspect-ratio: 1/2.44;
}

.unh-graphic-5{
  background-image: url(../../images/UNH/UNH_Womens-Recovery_Infographic.png);
  aspect-ratio: 1/2.18;
}

.unh-graphic-6{
  background-image: url(../../images/UNH/UNH_Womens-Recovery_InfographicGlance.png);
  aspect-ratio: 1200/2357;
}

.unh-graphic-7{
  background-image: url(../../images/UNH/UNH_Zelus_Infographic_Marijuana-vs-Nicotine.png);
  aspect-ratio: 0.72/1;
}

.unh-graphic-8{
  background-image: url(../../images/UNH/UNH_Zelus_Infographic_Traditional-School-vs-IOP.png);
  aspect-ratio: 1/2.73;
}

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

.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);
}

.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;
}

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

}