/*=======================================
==					Hero Section				==
========================================*/

@media screen and (min-width: 0px) {
   #work-hero .client-logo.ubm {
      background-color: #E52525;
   }
   #work-hero .hero-image {
      background-image:
         radial-gradient(at 45% 3%, hsla(204,28%,7%,1) 0px, transparent 50%),
         radial-gradient(at 98% 20%, hsla(0,79%,52%,0.8) 0px, transparent 50%),
         radial-gradient(at 3% 96%, hsla(0,79%,52%,0.16) 0px, transparent 50%),
         radial-gradient(at 43% 68%, hsla(204,28%,7%,1) 0px, transparent 50%),
         radial-gradient(at 0% 100%, hsla(204,28%,7%,1) 0px, transparent 50%),
         radial-gradient(at 81% 45%, hsla(204,28%,7%,1) 0px, transparent 50%);
   }
}

/*=======================================
==					  Sections  				==
========================================*/

@media screen and (min-width: 0px) {
   #overview {
      padding: var(--spacerVert) var(--spacerHori) var(--spacerVert) var(--spacerHori);
   }
   .work-content {
      padding: var(--spacerVert) var(--spacerHori) var(--spacerHori) var(--spacerHori);
   }
   .showcase-content {
      padding: 0 var(--spacerHori);
   }
}

/*=======================================
==					   Results 	   			==
========================================*/

@media screen and (min-width: 0px) {
   #results {
      padding: 0 var(--spacerHori);
   }
   #results .flex-group {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      grid-template-rows: 1fr auto;
      gap: 1.5rem;
   }
   #results .flex-group .web {
      grid-column: 1 / 13;
      grid-row-start: 1;
      border-radius: 1.5rem;
      overflow: hidden;
   }
   #results .flex-group .result {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      grid-row-start: 2;
      gap: 0.5rem;
      padding: 2.5rem 1rem;
      background-color: var(--colorWhite);
      border-radius: 1.5rem;
   }
      #results .flex-group .result.first {
         grid-area: 2 / 1 / 3 / 13;
      }
      #results .flex-group .result.second {
         grid-area: 3 / 1 / 4 / 13;
      }
      #results .flex-group .result.third {
         grid-area: 4 / 1 / 5 / 13;
      }
      #results .flex-group .result.fourth {
         grid-area: 5 / 1 / 6 / 13;
      }
   #results h3 {
      font-size: var(--fontSizeHeadingSen);
      text-align: center;
   }
   #results span {
      font-family: 'Sora', Helvetica, Arial, sans-serif;
      font-size: var(--fontSizeHeadingSec);
      font-weight: 500;
   }
   #results p {
      font-size: var(--fontSizeBodySm);
      text-align: center;
   }
}

@media screen and (min-width: 500px) {
   #results .flex-group .result.first {
      grid-area: 2 / 1 / 3 / 7;
   }
   #results .flex-group .result.second {
      grid-area: 2 / 7 / 3 / 13;
   }
   #results .flex-group .result.third {
      grid-area: 3 / 1 / 4 / 7;
   }
   #results .flex-group .result.fourth {
      grid-area: 3 / 7 / 4 / 13;
   }
}

@media screen and (min-width: 1024px) {
   #results .flex-group {
      grid-template-rows: 1fr auto;
      gap: 2.5rem;
   }
   #results .flex-group .result {
      padding: 4rem 2.5rem;
   }
}

@media screen and (min-width: 1280px) {
   #results .flex-group .result.first {
      grid-area: 2 / 1 / 3 / 4;
   }
   #results .flex-group .result.second {
      grid-area: 2 / 4 / 3 / 7;
   }
   #results .flex-group .result.third {
      grid-area: 2 / 7 / 3 / 10;
   }
   #results .flex-group .result.fourth {
      grid-area: 2 / 10 / 3 / 13;
   }
}

/* Dark mode */
@media screen and (min-width: 0px) {
   body.dark-mode #results .flex-group .result {
      background-color: rgba(204, 213, 219, 0.08);
      box-shadow: inset 0 0 0 1px var(--colorOffWhiteAlp);
   }
}

/*=======================================
==				  Brand Showcase 	   	   ==
========================================*/

@media screen and (min-width: 0px) {
   #brand-showcase .container .flex-group {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: repeat(3, 1fr) auto auto;
      gap: 1.5rem;
   }
      #brand-showcase .logo {
         display: flex;
         align-items: center;
         background-color: var(--colorWhite);
         border-radius: 1.5rem;
      }
         #brand-showcase .logo.primary {
            grid-area: 1 / 1 / 2 / 13;
            padding: 1.5rem 12vw;
         }
         #brand-showcase .logo.secondary {
            grid-area: 2 / 1 / 3 / 13;
            padding: 16vw;
         }
         #brand-showcase .logo.tertiary {
            grid-area: 3 / 1 / 4 / 13;
            padding: 20vw;
         }
   #brand-showcase .logo svg .logotype {
      fill: #262626;
   }
   #brand-showcase .logo svg .glyph {
      fill: #E52525;
   }

   #brand-showcase .color {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      min-height: 18vw;
      padding: 2.5rem 1.5rem;
      border-radius: 1.5rem;
   }
      #brand-showcase .color.first {
         grid-area: 4 / 1 / 5 / 13;
         background-color: #E52525;
      }
      #brand-showcase .color.second {
         grid-area: 5 / 1 / 6 / 7;
         background-color: #262626;
      }
      #brand-showcase .color.third {
         grid-area: 5 / 7 / 6 / 13;
         background-color: #FFFFFF;
      }
   #brand-showcase .color span.name {
      margin-bottom: 4px;
      font-family: 'Sora', Helvetica, Arial, sans-serif;
      font-size: var(--fontSizeHeadingQui);
      font-weight: 500;
   }
      #brand-showcase .color.first span.name,
      #brand-showcase .color.second span.name {
         color: var(--colorWhite);
      }
      #brand-showcase .color.third span.name {
         color: #262626;
      }
   #brand-showcase .color span.hex-code {
      font-size: var(--fontSizeBodySm);
   }
      #brand-showcase .color.first span.hex-code,
      #brand-showcase .color.second span.hex-code {
         color: var(--colorWhite);
      }
      #brand-showcase .color.third span.hex-code {
         color: #262626;
      }
}

@media screen and (min-width: 768px) {
   #brand-showcase .container .flex-group {
      grid-template-rows: repeat(4, 1fr);
   }
      #brand-showcase .logo.primary {
         grid-area: 1 / 1 / 3 / 10;
      }
      #brand-showcase .logo.secondary {
         grid-area: 1 / 10 / 2 / 13;
         padding: 4vw;
      }
      #brand-showcase .logo.tertiary {
         grid-area: 2 / 10 / 3 / 13;
         padding: 6vw;
      }
   #brand-showcase .color {
      padding: 2.5rem;
   }
      #brand-showcase .color.first {
         grid-area: 3 / 1 / 4 / 13;
      }
      #brand-showcase .color.second {
         grid-area: 4 / 1 / 5 / 7;
      }
      #brand-showcase .color.third {
         grid-area: 4 / 7 / 5 / 13;
      }
}

@media screen and (min-width: 1024px) {
   #brand-showcase .container .flex-group {
      grid-template-rows: repeat(3, 1fr);
      gap: 2.5rem;
   }
   #brand-showcase .color.first {
      grid-area: 3 / 1 / 4 / 7;
   }
   #brand-showcase .color.second {
      grid-area: 3 / 7 / 4 / 10;
   }
   #brand-showcase .color.third {
      grid-area: 3 / 10 / 4 / 13;
   }
}

/*=======================================
==				Collateral Showcase   	   ==
========================================*/

@media screen and (min-width: 0px) {
   #collateral-showcase .container .flex-group {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: repeat(3, 1fr);
      gap: 1.5rem;
   }
   #collateral-showcase .collateral {
      position: relative;
   }
      #collateral-showcase .collateral.first {
         grid-area: 1 / 1 / 2 / 13;
      }
      #collateral-showcase .collateral.second {
         grid-area: 2 / 1 / 3 / 7;
      }
      #collateral-showcase .collateral.third {
         grid-area: 2 / 7 / 3 / 13;
      }
      #collateral-showcase .collateral.fourth {
         grid-area: 3 / 1 / 4 / 13;
      }
   #collateral-showcase .collateral img {
      border-radius: 1.5rem;
   }
}

@media screen and (min-width: 768px) {
   #collateral-showcase .collateral.first {
      grid-area: 1 / 1 / 2 / 7;
   }
   #collateral-showcase .collateral.second {
      grid-area: 1 / 7 / 2 / 10;
   }
   #collateral-showcase .collateral.third {
      grid-area: 1 / 10 / 2 / 13;
   }
   #collateral-showcase .collateral.fourth {
      grid-area: 2 / 1 / 4 / 13;
   }
}

@media screen and (min-width: 1024px) {
   #collateral-showcase .container .flex-group {
      gap: 2.5rem;
   }
}

/*=======================================
==			   	Web Showcase      	   ==
========================================*/

@media screen and (min-width: 0px) {
   #website-showcase .flex-group {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 1.5rem;
   }
   #website-showcase .website {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
   }
   #website-showcase img {
      border-radius: 1.5rem;
   }
}

@media screen and (min-width: 1024px) {
   #website-showcase .flex-group {
      grid-template-columns: repeat(2, 1fr);
      gap: 2.5rem;
   }
   #website-showcase .website {
      gap: 2.5rem;
   }
}