/*
=============================
!HEADER
=============================
*/

.project {
   width: var(--Width);

   display: flex;
   flex-direction: column;

   margin: calc(var(--key) * 2);
   padding: calc(var(--key) * 2 - 2px) calc(var(--key) * 2) calc(var(--key) * 2);
   gap: calc(var(--key) * 2);

   border-radius: calc(var(--key) * 12);
   border-top: 2px solid var(--GreyMedium);
   background: var(--GreyMedium1);
   box-shadow: 0px 12px 15px 5px var(--GreyShadow);
}

.project__content {
   width: 100%;
   height: max-content;

   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;

   gap: calc(var(--key) * 2);
   border-radius: calc(var(--key) * 10);

   overflow: hidden;
}

.image {
   width: 100%;
}

.video {
   width: 100%;
}

.sl {
   cursor: zoom-in;
}

.project__about {
   width: 100%;
   height: min-content;

   display: flex;
   flex-direction: column;
   justify-content: start;
   align-items: start;

   padding: calc(var(--key) * 12) calc(var(--key) * 10.5) calc(var(--key) * 14);
   border-radius: calc(var(--key) * 10);

   background: var(--GreyMedium);
}
.about__heading {
   margin: 0 0 calc(var(--key) * 10);
}

.about__text {
   margin: 0 0 calc(var(--key) * 8);
}
.about__bold {
   display: flex;
   margin: 0 0 calc(var(--key) * 2);
   font-family: "bold", sans-serif;
   color: var(--GreyLight);
}

@media screen and (min-width: 1080px) {
   .project__about {
      padding: calc(var(--key) * 15) calc(var(--key) * 17) calc(var(--key) * 14);
   }
}

/* 
=============================
!SLIDER
=============================
*/

.slider {
   height: 100dvh;
   width: 100vw;
   display: flex;
   position: fixed;
   top: 0;
   overflow: hidden;
   background: var(--Black);
   transition: opacity 0.3s ease-in-out;
   z-index: 4000;
}
.slider-body {
   height: 100%;
   display: flex;
   position: relative;
}
.slide {
   height: 100%;
   width: 100vw;
   display: flex;
}