:root
{
   --navColor_0: #000; /* Navigation icon Backdrop */
   --navColor_1: #FFF; /* Navigation icon Front */
   --navColor_2: #000; /* Navigation butn Backdrop */
   --navColor_3: #FFF; /* Navigation butn Front */

   --stretch: 0.07;
   --ChargeStretch: 0.07;
   --PreDetect: 0;
   --Detect: 0;
   --EyeLid: 0;
   --Models: 70;
   --theme: #e03535;
   --theme_1: #add8e6;
}

main
{
    overflow-x: unset;
}

video
{
  object-fit: cover;
}

#Intro
{
  background-color: black;
  display: grid;
  grid-template-columns: repeat(6, calc(100%/6));
}

#Intro a, #Eye a
{
  text-decoration: underline !important;
  cursor: pointer;
}

#Intro a:link, #Eye a:link
{
  color: var(--light);
}

#Intro a:-webkit-any-link, #Eye a:-webkit-any-link {
  color: var(--light);
}

#Intro ::selection, #Eye ::selection
{
  background: var(--light) !important;
}

#Intro-Left
{
  grid-column: 2;
  grid-template-rows: auto max-content;
  display: grid;
}

#Intro-Left > div
{
  grid-row: 2;
  display: grid;
  overflow: hidden;
  position: sticky;
  bottom: 0;
  height: 100vh;
}

#Intro-Image
{
  height: auto;
  display: grid;
  grid-template-rows: max-content repeat(6, calc(35.21vw * var(--stretch)));
  position: absolute;
  bottom: 0;
  width: 100%;
}

#Intro-Image img
{
  grid-column: 1;
  box-sizing: border-box;
  object-fit: cover;
  display: block;
  width: 100%;
  height: 100%;
  object-position: bottom;
}

#Intro-Image img:first-child
{
  height: auto;
}

#Intro-Image img:last-child
{
  height: auto;
  align-self: end;
  z-index: 1;
}

#Intro-Right
{
  grid-column: 4 / span 2;
}

#Intro-Right > section
{
  width: 100%;
  display: inline-table;
  margin-top: 25vh;
  margin-bottom: 25vh;
}

#Intro-Right > section > section
{
  margin-top: var(--margin_Small);

}

#Intro-Right img
{
  left: -15px;
  position: relative;
  max-width: 100%;
  width: fit-content;
}

#Intro-Right span
{
  margin-top: var(--margin_Small);
  display: block;
}

#Intro-Right span li
{
  color: var(--accent);
  opacity: 0.5;
}

#Intro-Right span > h3, #Intro-Right span > h4
{
  display: unset;
}

#Intro-Right :-webkit-any(h1, h2, h3, h4)
{
  text-align: left;
  color: var(--accent);
}

#Intro-Right p
{
  color: var(--accent);
  margin-top: var(--margin_Small);
  max-width: 45ch;
}




/*
 * –––––––––––––––––––– CHARGE –––––––––––––––––––––––––
 */





#Charge
{
   background-color: black;
   display: grid;
   grid-template-columns: repeat(3, calc(100%/3));
   grid-template-rows: repeat(3, calc(100%/3));
   height: 300vh;
}

#Charge_ImageContainer
{
   grid-column: 1 / span rest;
   grid-row: 1 / span rest;
   width: 100%;
   overflow: hidden;
   height: 100vh;
   position: sticky;
   top: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   /* will-change: transform; */
}

#Charge-Image
{
   display: flex;
   flex-direction: column;
   transform: translateX(16vw) translateY(calc((16vh * var(--PreDetect)) + (-12vh * var(--Detect)))) scaleX(-1) scale(calc(1 + (3 * var(--PreDetect)))) rotateZ(calc(-30deg + (-12deg * (var(--PreDetect) + var(--ChargeStretch))))) translateY(calc(33vmin * var(--PreDetect)))

}

#Charge-Image img
{
   height: calc(12vmin * var(--ChargeStretch));
   width: 6vmin;
   grid-row: 1;
   object-position: bottom;
   will-change: height;
}

#Charge-Image img:first-child,
#Charge-Image img:nth-child(2)
{
  height: 100%;
}

#Charge-Image img:first-child
{
   width: 1vmin;
   z-index: -1;
   transform-origin: 100% 0;
   transform: translateY(21.25vmin) translateX(4.2vmin) rotate(0deg);
   animation: Blindspot-Indcate-OFF 0.066s;
   animation-fill-mode: backwards;
}

#Charge-Image.on img:first-child
{
   animation: Blindspot-Indcate-ON 0.066s;
   animation-fill-mode: forwards;
}

@keyframes Blindspot-Indcate-ON {
   0%
   {
      transform: translateY(21.25vmin) translateX(4.25vmin) rotate(0deg);
   }
   100%
   {
      transform: translateY(21.25vmin) translateX(4.25vmin) rotate(-15deg);
   }
}

@keyframes Blindspot-Indcate-OFF {
   0%
   {
      transform: translateY(21.25vmin) translateX(4.25vmin) rotate(-15deg);
   }
   100%
   {
      transform: translateY(21.25vmin) translateX(4.2vmin) rotate(0deg);
   }
}

#Charge-Image img:last-child
{
  height: 100%;
  transform: translateY(-100%);
}

#Charge-Image::after
{
   content: "";
   position: absolute;
   top: 28.5vmin;
   right: -4.5vmin;
   width: 10vmin;
   height: 10vmin;
   border-radius: 50%;
   background: radial-gradient(circle at right, #ff0000ff 0%,#00000000 25%);
   mask-image: radial-gradient(circle at 50%, #0000 50%,#000 120%);
   -webkit-mask-image: radial-gradient(circle at 50%, #0000 50%,#000 120%);
   transform-origin: center;
   animation: DetectPulse 2s linear;
   animation-iteration-count: infinite;
   z-index: -1;
   opacity: calc((var(--PreDetect) / 1.5) + (var(--Detect) * 3));
   /* opacity: calc((var(--Detect) * var(--DetectOpacity) * 2) - 1); */
}

@keyframes DetectPulse {
   0%
   {
      box-shadow: inset 0px 0px 0px 10vmin #000;
      transform: rotate(5deg) scale(0);
   }
   10%
   {
      box-shadow: inset 0px 0px 0px 10vmin #000000FF;
   }
   50%
   {
      box-shadow: inset 0px 0px 0px 10vmin #0000;
   }
   100%
   {
      box-shadow: inset 0px 0px 0px 10vmin #000;
      transform: rotate(5deg) scale(3);
   }
}

#Charge_Wall
{
   height: 100vh;
   width: fit-content;
   display: grid;
   grid-column: 1 / span rest;
   grid-row: 1 / span rest;
   position: sticky;
   top: 0;
   left: calc(50% - 40vmin);
   align-items: center;
   transform: translateY(calc(3vh + (-20vh * var(--Detect))));
}

#Charge_Wall svg
{
   height: 40vmin;
   transform-origin: right;
   transform: translateX(-50vmin) scale(1.5);
   opacity: calc(var(--Detect) * 3);
}

#Charge_Wall svg .st0 { fill:#b7b7b7; will-change: auto;}
#Charge_Wall svg .st1 { fill:#FAFAFA; will-change: auto;}
#Charge_Wall svg .st2 { fill:#5a5a5a; will-change: auto;}

#Charge_Description
{
   grid-column: 1 / span 2;
   grid-row: 1 / span 2;
   margin: auto;
   width: 100%;
   position: sticky;
   bottom: 0;
   height: 100vh;
   display: flex;
   align-items: center;
}

#Charge_Description > div
{
   margin: auto;
   display: grid;
   gap: 2em;
   grid-template-columns: auto min-content;
   transform: translateY(calc(-20vh * var(--ChargeStretch)));
}

#Charge_Description > div > div
{
   margin: auto;
}

#Charge_Description > div h2
{
   color: var(--light);
   margin: 0;
}

#Charge_Description > div h4
{
   color: var(--accent);
   width: 21ch;
}

#Charge_Description > div > span
{
   grid-column: 2;
   grid-row: 1;
   display: grid;
   height: fit-content;
   margin: auto;
   overflow: hidden;
}

#Charge_Description > div > span > img
{
   height: 16vmin;
   grid-column: 1;
   grid-row: 1;
   opacity: 0.2;
}

#Charge_Description > div > span #Charger_Icon
{
   width: -webkit-fill-available;
   height: calc(125% * var(--ChargeStretch));
   max-height: 16vmin;
   margin-top: auto;
   object-position: bottom;
   opacity: 1;
}

#Detect_Description
{
   grid-column: 1 / span 3;
   grid-row: 3 / span 2;
   margin: auto;
   width: 100%;
   position: sticky;
   bottom: 0;
   height: 100vh;
   display: flex;
   align-items: center;
   justify-content: center;
   transform: translateY(calc((-20vh * var(--Detect)) - 5vh));
   opacity: calc(var(--Detect) * 3);
}

#Detect_Description > div h2
{
   color: var(--light);
   margin: 0;
}

#Detect_Description > div h4
{
   color: var(--accent);
   width: 80%;
   width: 26ch;
}

#Detect_Description img
{
   width: 13ch;
   display: block;
   margin-top: 1em;
   transform-origin: top left;
   transform: rotate(calc(var(--Detect) * 12deg)) translateX(8ch);
   opacity: calc((var(--Detect) * 3) - 1);
}

@media (max-width: 700px) {
   #Charge_ImageContainer
   {
      transform: translateY(calc(18vh + (10vh * var(--PreDetect))));
   }

   #Charge_Wall svg
   {
      transform-origin: right;
      transform: translateX(-50vmin) translateY(9vh) scale(1.5);
   }

   #Charge-Image
   {
      transform: translateY(calc(-10vh * var(--Detect))) scaleX(-1) scale(calc(1 + (3 * var(--PreDetect)))) rotateZ(calc(-30deg + (-12deg * (var(--PreDetect) + var(--ChargeStretch))))) translateY(calc(25vmin * var(--PreDetect)));
   }

   #Charge_Description
   {
      grid-column: 1 / span 3;
      transform: translateY(-18vh);
   }

   #Charge_Description > div
   {
      gap: 1em;
      grid-template-columns: unset;
      grid-template-rows: auto min-content;
      transform: translateY(calc(-10vh * var(--ChargeStretch)));
   }


   #Charge_Description > div > div
   {
      grid-row: 2;
   }

   #Charge_Description > div > span
   {
      grid-column: 1;
      grid-row: 1;
      transform: rotateZ(90deg);
   }

   #Charge_Description > div > span > img
   {
      height: 120px;
   }

   #Charge_Description > div > span #Charger_Icon
   {
      width: -webkit-fill-available;
      height: calc(125% * var(--ChargeStretch));
      max-height: 120px;
      margin-top: auto;
      object-position: bottom;
      opacity: 1;
   }
}




/*
 * –––––––––––––––––––– EYE –––––––––––––––––––––––––
 */





#Eye
{
  display: grid;
  height: 150vh;
  background-color: black;
  width: 100%;
}

#Eye > div
{
  grid-column: 1;
  grid-row: 1;
}

#Eye-hidden /* For changing HeadderColor */
{
   position: relative;
   height: 100vh;
   margin-top: auto;
   z-index: -1;
}

.reveal #Eye-Text
{
  top: -36px;
}

.reveal #Eye-Reveal
{
  opacity: 1;
  transform: translateY(0px);
}

#Eye-Container > div
{
  height: 100vh;
  display: grid;
  position: sticky;
  top: 0;
}

#Eye-Reveal
{
  opacity: 0;
  transform: translateY(50px);
}

#Eye-Vid
{
  grid-row: 1;
  grid-column: 1;
  width: 100%;
  object-fit: cover;
  object-position: center;
  height: calc(100vh * var(--EyeLid));
  max-height: 100vh;
  filter: contrast(0.5);
  display: flex;
  margin: auto auto;
  position: relative;
  will-change: height;
}

#Eye-Text
{
  top: 0;
  grid-row: 1;
  grid-column: 1;
  display: grid;
  margin: auto auto;
  z-index: 1;
  grid-template-rows: auto 0px;
  position: relative;

  transition: top var(--animationSlow) var(--animationStyle);
  -webkit-transition: top var(--animationSlow) var(--animationStyle);
  -moz-transition: top var(--animationSlow) var(--animationStyle);
  -o-transition: top var(--animationSlow) var(--animationStyle);
  -ms-transition: top var(--animationSlow) var(--animationStyle);
  transition: top var(--animationSlow) var(--animationStyle);
}

#Eye-Text > section
{
  grid-row: 1;
}

#Eye-Text h1
{
  margin-top: 0px;
}

#Eye-Text section > h2
{
  margin-top: 0px;
}

#Eye-Text > h2
{
  margin-top: 20px;
  grid-row: 2;
  transform: translateY(50px);
  opacity: 0;

  transition: all var(--animationSlow) var(--animationStyle);
  -webkit-transition: all var(--animationSlow) var(--animationStyle);
  -moz-transition: all var(--animationSlow) var(--animationStyle);
  -o-transition: all var(--animationSlow) var(--animationStyle);
  -ms-transition: all var(--animationSlow) var(--animationStyle);
  transition: all var(--animationSlow) var(--animationStyle);
}

#Eye-Container h1, #Eye-Container h2
{
  color: White;
  text-align: center;
}

#Eye-Container li
{
  color: var(--light);
  text-align: center;
  opacity: 0.75;
}





/*
 * –––––––––––––––––––– ETHNOGRAPHIC –––––––––––––––––––––––––
 */


#Ethnographic_Map
{
   display: grid;
   justify-content: center;
   align-items: center;
}

#Ethnographic_Map > div:first-of-type
{
   height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   grid-column: 1;
   grid-row: 1;
}

.Ethnographic_Map
{
   background: var(--theme);
   border-radius: 50%;
   margin: auto;
}

#Ethnographic_Map_Zone
{
   background: var(--theme);
   border-radius: 50%;
   margin: auto;
   width: 6%;
   padding-top: 6%;
   animation: Map_Zoom_Zone 2s var(--animationStyle) forwards;
}

#Ethnographic_Map_Zone::after
{
   content: '';
   background: #e0353533;
   position: absolute;
   border-radius: 50%;

   width: 860%;
   height: 860%;
   top: -380%;
   left: -380%;

   animation: Map_Zoom_ZonePulse 1.5s ease-in-out infinite alternate;
}

@media (max-width: 800px) {
   #Ethnographic_Map_Zone
   {
      width: 8%;
      padding-top: 8%;
   }
}

#Ethnographic_Map img
{
   background: #d5dbe1;
   height: 240%;
   animation: Map_Zoom 2s var(--animationStyle);
   animation-fill-mode: forwards;
}

@keyframes Map_Zoom {
   0%
   {
      height: 240%;
   }
   100%
   {
      height: 100%;
   }
}
@keyframes Map_Zoom_Zone {
   0%
   {
      transform: scale(1);
   }
   100%
   {
      transform: scale(0.4);
   }
}
@keyframes Map_Zoom_ZonePulse {
   0%
   {
      transform: scale(1);
   }
   100%
   {
      transform: scale(1.075);
   }
} /* DOES NOT YET WORK! (size not scaling to window) */


/*
 * –––––––––––––––––––– KONCEPTER –––––––––––––––––––––––––
 */

#Koncepter
{
   padding-left: 1em;
   padding-right: 1em;
}

#Skitser
{
   margin: auto;
   display: grid;
   width: 100%;
   margin-top: var(--margin_Medium);
   max-width: 1200px;
   gap: 1em;
   grid-template-columns: 53.6% auto;
}

#Skitser img
{
   width: 100%;
   object-fit: contain;
}

#KonceptBeskrivelser
{
   grid-column: 1 / span 2;
   width: 100%;
   display: grid;
   grid-template-columns: auto auto auto;
   gap: 0px 2em;
   text-align: center;
}


@media (max-width: 600px) {
   #KonceptBeskrivelser
   {
      grid-template-columns: unset;
      grid-column: 1;
   }
   #Skitser
   {
      grid-template-columns: auto;
   }
}



/*
 * –––––––––––––––––––– SUCESSKRITERIER –––––––––––––––––––––––––
 */





#Sucesskriterier
{
  display: grid;
  grid-template-columns: repeat(6, calc(100%/6));
  grid-row-gap: 10px;
}

#Sucesskriterier h1
{
  grid-column: 2 / span rest;
  font-size: 3.5vw;
  text-align: left;
  margin-left: auto;
}

#Sucesskriterier h3
{
  margin-top: 0;
  font-weight: 600;
}

#Sucesskriterier > div
{
    grid-column: 2 / span rest;
}

.S-Container
{
  grid-template-columns: auto 60%;
  display: grid;
  margin-bottom: 0em;
  border-radius: var(--radius);
}

.S-Title
{
  grid-column: 1;
  grid-template-columns: auto 50px;
  height: min-content;
  width: 100%;
  padding: 10px;
  position: relative;
  left: -10px;
  cursor: pointer;
}

.S-Title:hover
{
  background: var(--accent);
}

.S-Text
{
  display: flex;
  grid-column: 2;
  grid-row: 1 / span 16;
  width: 50%;
  height: 50%;
  margin: 0 auto;
  position: sticky;
  top: 25%;
  margin-top: 10%; /*Disable when menu is pulled down*/
}

.S-Text p
{
  margin: auto;
}

#Sucesskriterier .button
{
  grid-column: 2 / span rest;
}




/*
 * –––––––––––––––––––– FORMUDVIKLING –––––––––––––––––––––––––
 */




#Formudvikling_VaerkstedTitle
{
   text-align: center;
}

#Formudvikling_VaerkstedTitle h3
{
    font-weight: normal;
}






/*
 * –––––––––––––––––––– ITERERING –––––––––––––––––––––––––
 */


.Picture_Points
{
   margin: auto;
   margin-top: var(--margin_MediumLarge);
   width: calc(100% - (var(--margin_MediumLarge)*2));
   max-width: 1200px;
   /* height: calc((100% - (var(--margin_MediumLarge)*2)) / 2.4);
   max-height: 500px; */
   display: flex;
   grid-template-columns: auto auto;
}

.Picture_Points > img
{
   width: 66.6666%;
   height: intrinsic;
}

.Picture_Points > div
{
   margin: auto;
   width: 33.3333%;
}

.Picture_Points > div > p
{
   margin: auto;
   width: 60%;
}

#Iterering_3DModels
{
   margin-top: var(--margin_MediumLarge);
   width: 100%;
   overflow-x: hidden;
   display: grid;
   display: -webkit-flex;
   justify-content: center;
}

#Iterering_3DModels > img
{
   width: 120vmax;
   height: max-content;
   height: intrinsic;
   transform: translateX(calc(var(--Models) * 1vmax));
   will-change: transform;
}





/*
 * –––––––––––––––––––– ITERERING –––––––––––––––––––––––––
 */





#Iterering_3DFinalModel
{
   display: flex;
   justify-content: center;
   width: 100%;
   margin: auto;
   margin-top: var(--margin_Medium);
}

#Iterering_3DFinalModel img
{
   transform: scaleX(-1) translateX(-10%);
   width: calc(100% - (var(--margin_MediumLarge) * 2));
   max-width: 1200px;
   min-width: 80%;
}





/*
 * –––––––––––––––––––– BRUG (Endelig) –––––––––––––––––––––––––
 */




#ExplodedView
{
   margin-top: var(--margin_Medium);
   display: grid;
   width: -webkit-fill-available;
   grid-template-columns: auto 80vh;
   /* grid-template-columns: 400px auto; */
   /* align-items: center; */
}

.DropdownText_text
{
   grid-column: 1;
   grid-row: 1;
   width: 40%;
   height: fit-content;
   max-width: 450px;
   min-width: 300px;
   margin: auto;
   display: grid;
   grid-gap: var(--margin_Small);
   margin-top: calc((var(--margin_Small) / 2) + var(--margin_Medium)); /*Add small margin for the ::After */
   margin-bottom: calc(var(--margin_Small) + var(--margin_Medium)); /*Add small margin for the ::After*/
   position: relative;
   z-index: 1;
   /* padding-left: 1em;
    padding-right: 1em; */
}

@media (max-width: 900px)
{
   #ExplodedView
   {
      grid-template-columns: auto auto;
   }

   .DropdownText_text
   {
      width: 300px;
      grid-column: 1 / span 2;
      margin-left: calc((var(--margin_Small) * 1.5) + 1em);
   }
}

@media (max-width: 700px)
{
   .DropdownText_text
   {
      grid-row: 2;
      max-width: unset;
      min-width: unset;
      width: calc(var(--ClientWidth) - (var(--margin_Small) * 3) - 2em);
      margin-left: auto;
   }
}


.DropdownText_text::after
{
   position: absolute;
   content: '';
   display: block;
   top: calc(0px - (var(--margin_Small) / 2));
   bottom: calc(0px - var(--margin_Small));
   left: calc(0px - (var(--margin_Small) * 1.5));
   right: calc(0px - (var(--margin_Small) * 1.5));
   z-index: -2;
   border-radius: var(--radius);
   backdrop-filter: blur(var(--blur));
   -webkit-backdrop-filter: blur(var(--blur));
}

.DropdownText_text h2
{
   margin-top: 0;
}

.DropdownText_text .on
{
   grid-template-rows: min-content 1fr;
   margin-bottom: 1em;
   /* margin-top: 1em; */
}

.DropdownText_text > section > svg
{
   transition: all var(--animationFast) var(--animationStyle);
   -webkit-transition: all var(--animationFast) var(--animationStyle);
   -moz-transition: all var(--animationFast) var(--animationStyle);
   -o-transition: all var(--animationFast) var(--animationStyle);
   -ms-transition: all var(--animationFast) var(--animationStyle);
}

.DropdownText_text .on > svg
{
   transform: rotate(45deg);
}


.DropdownText_text section
{
   display: grid;
   grid-template-columns: 1fr 50px;
   grid-template-rows: min-content 0fr;
   position: relative;
}

/* .DropdownText_text section:not(.DropdownText_headline):hover line
{
   stroke: var(--theme);
} */

.DropdownText_text section::after
{
   position: absolute;
   content: '';
   display: block;
   top: calc(0px - (var(--margin_Small) / 2));
   bottom: calc(0px - (var(--margin_Small) / 2));
   left: calc(0px - var(--margin_Small));
   right: calc(0px - var(--margin_Small));
   border-radius: var(--radius);
   opacity: 0.5;
   z-index: -1;
}

.DropdownText_text .on::after
{
   opacity: 0.5;
   background: var(--accent);
}

.DropdownText_text section:hover::after
{
   opacity: 1;
   background: var(--accent);
}

.DropdownText_text section h3
{
   margin-top: 0;
}

.DropdownText_text section > svg
{
   height: var(--margin_Small);
   width: 20px;
   margin: auto;
   overflow: visible;
}

.DropdownText_text line
{
   stroke: var(--theme);
   stroke-width: 3.5px;
   stroke-linecap: round;
}

.DropdownText_description
{
   overflow: hidden;
   grid-column: 1 / span 2;
}

.DropdownText_description text
{
   display: block;
   margin-top: var(--margin_Small);
}

.DropdownText_images
{
   display: grid;
   grid-column: 1 / span 2;
   grid-row: 1;
   width: 100%;
   height: 100vh;
   position: sticky;
   top: 0;
   background: #ececec;
   align-items: center;
   overflow: hidden;
}

#DropdownText_image
{
   grid-column: 1;
   grid-row: 1;
   width: 100%;
   height: inherit;
   object-position: right;
   -webkit-mask-position: center center;
   mask-position: center center;
   -webkit-mask-repeat: no-repeat;
   mask-repeat: no-repeat;
}

.DropdownText_images svg
{
   grid-column: 1;
   grid-row: 1;
   height: inherit;
   width: inherit;
   position: absolute;
   right: 0;

   opacity: 0;

   transition: opacity var(--animationFast) var(--animationStyle);
   -webkit-transition: opacity var(--animationFast) var(--animationStyle);
   -moz-transition: opacity var(--animationFast) var(--animationStyle);
   -o-transition: opacity var(--animationFast) var(--animationStyle);
   -ms-transition: opacity var(--animationFast) var(--animationStyle);
}

.DropdownText_images svg.on
{
   opacity: 0.75;
}

.DropdownText_images svg g
{
   transition: opacity var(--animationFast) var(--animationStyle);
   -webkit-transition: opacity var(--animationFast) var(--animationStyle);
   -moz-transition: opacity var(--animationFast) var(--animationStyle);
   -o-transition: opacity var(--animationFast) var(--animationStyle);
   -ms-transition: opacity var(--animationFast) var(--animationStyle);
}



/*
 * –––––––––––––––––––– BRUG (Endelig) –––––––––––––––––––––––––
 */





#User_testing
{
   margin-bottom: var(--margin_Medium);
}




/*
 * –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 * –––––––––––––––––––– Media Querys –––––––––––––––––––––––––
 * –––––––––––––––––––––––––––––––––––––––––––––––––––––––––––
 */


@media screen and (max-width: 900px)
{
  #Intro-Image
  {
    grid-template-rows: max-content repeat(6, calc(70.42vw * var(--stretch)));
  }

  #Intro-Left
  {
    grid-column: 1 / span 2;
    transform: translateX(-45%);
    grid-row: 1;
  }

  #Intro-Right
  {
    grid-column: 2 / span 5;
    grid-row: 1;
    margin: auto 3em;
    z-index: 1;
    max-width: 400px;
  }
}

@media screen and (max-width: 700px)
{
  .problematikker > div,
  .koncept > div
  {
    grid-row: auto;
  }

  .koncepter img
  {
    max-width: 400px;
  }
}