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

@media screen and (min-width: 0px) {
   #work-hero .client-logo.ubm {
      background-color: #212222;
   }
   #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(173,93%,58%,0.8) 0px, transparent 50%),
         radial-gradient(at 3% 96%, hsla(173,93%,58%,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 {
      position: relative;
      grid-column: 1 / 13;
      grid-row-start: 1;
      padding-bottom: 65.5%;
      border-radius: 1.5rem;
      overflow: hidden;
   }
   #results .flex-group .web iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
   }
   #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(--fontSizeHeadingQui);
      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(10, 1fr);
      gap: 1.5rem;
   }
      #brand-showcase .brand {
         position: relative;
      }
         #brand-showcase .brand.first {
            grid-area: 1 / 1 / 3 / 7;
         }
         #brand-showcase .brand.second {
            grid-area: 1 / 7 / 3 / 13;
         }
         #brand-showcase .brand.third {
            grid-area: 3 / 1 / 5 / 13;
         }
         #brand-showcase .brand.fourth {
            grid-area: 9 / 1 / 11 / 13;
         }

   #brand-showcase .color {
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 2.5rem 1.5rem;
      border-radius: 1.5rem;
   }
      #brand-showcase .color.first {
         grid-area: 5 / 1 / 6 / 13;
         background-color: #31F7E0;
      }
      #brand-showcase .color.second {
         grid-area: 6 / 1 / 7 / 13;
         background-color: #212222;
      }
      #brand-showcase .color.third {
         grid-area: 7 / 1 / 8 / 13;
         background-color: #FFFFFF;
      }
      #brand-showcase .color.fourth {
         grid-area: 8 / 1 / 9 / 13;
         background-color: #4A4A4A;
      }
   #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.third span.name {
         color: #212222;
      }
      #brand-showcase .color.second span.name,
      #brand-showcase .color.fourth span.name {
         color: var(--colorWhite);
      }
   #brand-showcase .color span.hex-code {
      font-size: var(--fontSizeBodySm);
   }
      #brand-showcase .color.first span.hex-code,
      #brand-showcase .color.third span.hex-code
       {
         color: #212222;
      }
      #brand-showcase .color.second span.hex-code,
      #brand-showcase .color.fourth span.hex-code {
         color: var(--colorWhite);
      }
}

@media screen and (min-width: 768px) {
   #brand-showcase .container .flex-group {
      grid-template-rows: repeat(8, 1fr);
   }
   #brand-showcase .brand.first {
      grid-area: 1 / 1 / 3 / 9;
   }
   #brand-showcase .brand.second {
      grid-area: 1 / 9 / 3 / 13;
   }
   #brand-showcase .brand.third {
      grid-area: 3 / 1 / 5 / 13;
   }
   #brand-showcase .brand.fourth {
      grid-area: 7 / 1 / 9 / 13;
   }
   #brand-showcase .color {
      padding: 2.5rem;
   }
      #brand-showcase .color.first {
         grid-area: 5 / 1 / 6 / 9;
      }
      #brand-showcase .color.second {
         grid-area: 6 / 1 / 7 / 9;
      }
      #brand-showcase .color.third {
         grid-area: 5 / 9 / 6 / 13;
      }
      #brand-showcase .color.fourth {
         grid-area: 6 / 9 / 7 / 13;
      }
}

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

@media screen and (min-width: 1240px) {
   #brand-showcase .brand.first {
      grid-area: 1 / 1 / 5 / 4;
   }
   #brand-showcase .brand.second {
      grid-area: 1 / 4 / 5 / 7;
   }
   #brand-showcase .brand.third {
      grid-area: 1 / 7 / 3 / 13;
   }
   #brand-showcase .brand.fourth {
      grid-area: 3 / 7 / 5 / 13;
   }
   #brand-showcase .color.first {
      grid-area: 5 / 1 / 7 / 7;
   }
   #brand-showcase .color.second {
      grid-area: 5 / 7 / 7 / 10;
   }
   #brand-showcase .color.third {
      grid-area: 5 / 10 / 6 / 13;
   }
   #brand-showcase .color.fourth {
      grid-area: 6 / 10 / 7 / 13;
   }
}

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

@media screen and (min-width: 0px) {
   #website-showcase .container {
      display: grid;
      gap: 1.5rem;
   }
   #website-showcase .flex-group {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 1.5rem;
   }
      #website-showcase .flex-group.top {
         align-items: flex-end;
      }
      #website-showcase .flex-group.bottom {
         align-items: flex-start;
      }

   #website-showcase .flex-group .video-wrapper {
      width: 100%;
   }
      #website-showcase .flex-group .video-wrapper .website {
         position: relative;
         padding-bottom: 52.8%;
         border-radius: 1.5rem;
         overflow: hidden;
      }
         #website-showcase .flex-group .video-wrapper.mobile .website {
            padding-bottom: 177.5%;
         }

   #website-showcase .flex-group .website iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
   }
}

@media screen and (min-width: 768px) {
   #website-showcase .flex-group .video-wrapper {
      width: calc(75% - 0.75rem);
   }
   #website-showcase .flex-group .video-wrapper.mobile {
      width: calc(25% - 0.75rem);
   }
}

@media screen and (min-width: 1024px) {
   #website-showcase .container,
   #website-showcase .flex-group {
      gap: 2.5rem;
   }
   #website-showcase .flex-group .video-wrapper {
      width: calc(70% - 1.25rem);
   }
   #website-showcase .flex-group .video-wrapper.mobile {
      width: calc(30% - 1.25rem);
   }
}

/*=======================================
==			      	Web Final      	   ==
========================================*/

@media screen and (min-width: 0px) {
   #website-final {
      padding: var(--spacerVert) var(--spacerHori) 0 var(--spacerHori);
   }
   #website-final img {
      margin-top: var(--spacerHori);
   }
}