/* //////////////////////////////////////////////////////////////////////////////////////////

Homepage:
Our Production

////////////////////////////////////////////////////////////////////////////////////////// */


/* ///////////////////////////////////////////// */

  
/* Production - Container */
  
.production-container {
  background-color: #f4f6f8;
  padding: 150px 0;
  overflow: hidden;
  display: grid;
  gap: clamp(60px, calc(40px + 2.5vw), 75px);
  /* PREVENTS SELECTING + DRAGGING */
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  /* PREVENTS SELECTING ON DOUBLE TAP IN IOS */
  -webkit-touch-callout: none;
  /* PREVENTS ZOOM IN ON DOUBLE TAP IOS */
  touch-action: manipulation;
}
  @media screen and (max-width: 700px) {
    .production-container {
      padding: 100px 0 85px 0;
    }
  }


/* Production - Intro - Container */
  
.production-intro {
  display: grid;
  gap: clamp(40px, calc(20px + 2.5vw), 50px);
  padding: 0 20px;
  box-sizing: border-box;
  text-align: center;
}



/* Production - Title */
  
.production-title {
  font-family: 'Proxima Intervlag Extrabold', Helvetica, Arial, sans-serif;
  font-size: clamp(26px, calc(20px + 1.2vw), 42px);
  text-transform: uppercase;
  color: #0c0c10;
  line-height: 0.85;
}

.production-title .highlight {
  color: #e30613;
}


/* Production - Text */
  
.production-text {
  font-family: 'Proxima Nova Medium', Helvetica, Arial, sans-serif;
  font-size: 18px;
  color: #555558;
  line-height: 1.55;
  max-width: 875px;
  margin: auto;
}


/* ////////// */


/* Production - Bento */

.production-bento-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}


/* Basisstijl: Puur voor de desktop grid-layout */
.production-bento {
  cursor: default;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(10, 1fr);
  gap: 15px;
  height: 850px;
  width: 100%;
  max-width: 1350px;
  padding: 0 35px;
  box-sizing: border-box;
  margin: auto;
  /* Performance optimizations */
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
  @media screen and (max-width: 950px) {
  .production-bento {
    display: flex;
    height: fit-content;
    padding: 0 35px 115px 35px;

    /* Scroll Containter + Drag To Scroll */
    scroll-snap-type: x mandatory;
    scroll-padding-left: 35px;
    overscroll-behavior-x: contain;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;

    /* Performance optimization */
    will-change: scroll-position;
  }
}

/* Verdere aanpassing voor nog kleinere schermen */
@media screen and (max-width: 700px) {
  .production-bento {
    scroll-padding-left: 20px;
    padding: 0 20px 95px 20px;
  }
}
.production-bento::-webkit-scrollbar {
  display: none;
}

.production-bento.is-dragging {
  overflow-x: hidden;
  scroll-snap-type: none;
}


/* ////////// */
  
  
/* Control Buttons - Container */
  
.production-bento-control-buttons-container {
  z-index: 2;
  width: fit-content;
  position: absolute;
  right: 35px;
  bottom: 0;
  box-sizing: border-box;
  display: flex;
  gap: 8px;
  display: none;
  /* PREVENTS SELECTING + DRAGGING */
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  /* PREVENTS SELECTING ON DOUBLE TAP IN IOS */
  -webkit-touch-callout: none;
  /* PREVENTS ZOOM IN ON DOUBLE TAP IOS */
  touch-action: manipulation;
}
  @media screen and (max-width: 950px) {
    .production-bento-control-buttons-container {
      display: flex;
    }
  }
  @media screen and (max-width: 700px) {
    .production-bento-control-buttons-container {
      right: 20px;
      transform: scale(0.78);
      transform-origin: top right;
    }
  }


/* ///// */


/* Control Buttons (Main Styling) */
  
.production-bento-control-button {
  z-index: 1; /* anders komt hover-effect voor tekst */
  border-radius: 25px;
  cursor: pointer;
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  position: relative;
  border: 0;
  outline: 0;
  background-color: #0c0c10;
  transition: background-color 0.28s ease; 
  /* PREVENTS SELECTING + DRAGGING */
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  /* PREVENTS SELECTING ON DOUBLE TAP IN IOS */
  -webkit-touch-callout: none;
  /* PREVENTS ZOOM IN ON DOUBLE TAP IOS */
  touch-action: manipulation;
  /* PREVENTS DARK BACKGROUND ON TOUCH */
  -webkit-tap-highlight-color: transparent;
}

.production-bento-control-button:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background-color: #ffffff30;
  border-radius: 25px;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.2s cubic-bezier(0, 0, 0, 1), opacity 0.2s;
  opacity: 0;
  z-index: -1;
}
  @media screen and (max-width: 700px) {
    .production-bento-control-button:before {
      transition: 0s;
    }
  }

.production-bento-control-button:not(.disabled):hover:before {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.production-bento-control-button:not(.disabled):active:before {
  transform: translate(-50%, -50%) scale(1);
  background-color: #ffffff20;
}
  
  
/* Arrow Icon */
.production-bento-control-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  background-color: #fff;
  /* SVG Arrow Icon */
  -webkit-mask-image: url('data:image/svg+xml,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M19.7070312,9.2929688l-5.6005859-5.6005859c-0.390625-0.390625-1.0234375-0.390625-1.4140625,0 s-0.390625,1.0234375,0,1.4140625L16.5859375,9H1c-0.5522461,0-1,0.4477539-1,1s0.4477539,1,1,1h15.5859375l-3.8935547,3.8935547 c-0.390625,0.390625-0.390625,1.0234375,0,1.4140625c0.1953125,0.1953125,0.4511719,0.2929688,0.7070312,0.2929688 s0.5117188-0.0976562,0.7070312-0.2929688l5.6005859-5.6005859C20.0976562,10.3164062,20.0976562,9.6835938,19.7070312,9.2929688z" /></svg>');
  mask-image: url('data:image/svg+xml,<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M19.7070312,9.2929688l-5.6005859-5.6005859c-0.390625-0.390625-1.0234375-0.390625-1.4140625,0 s-0.390625,1.0234375,0,1.4140625L16.5859375,9H1c-0.5522461,0-1,0.4477539-1,1s0.4477539,1,1,1h15.5859375l-3.8935547,3.8935547 c-0.390625,0.390625-0.390625,1.0234375,0,1.4140625c0.1953125,0.1953125,0.4511719,0.2929688,0.7070312,0.2929688 s0.5117188-0.0976562,0.7070312-0.2929688l5.6005859-5.6005859C20.0976562,10.3164062,20.0976562,9.6835938,19.7070312,9.2929688z" /></svg>');
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 20px 20px;
  mask-size: 20px 20px;
}

/* Left Icon */
.production-bento-control-button.left::after {
  transform: rotate(180deg);
}

/* Right Icon */
.production-bento-control-button.right::after {
  transform: unset;
}

/* Disabled */
.production-bento-control-button.disabled {
  background-color: #00004010;
  cursor: auto;
}
.production-bento-control-button.disabled::after {
  background-color: #00040030; /* Makes icon grey */
}


/* ////////// */


.item {
  scroll-snap-align: start;

  display: flex;
  position: relative;
  border-radius: clamp(28px, calc(10px + 2vw), 40px);
  padding: clamp(25px, calc(12px + 2vw), 45px);
  box-sizing: border-box;
  overflow: hidden;
  transition: 0.42s cubic-bezier(0.1, 0, 0, 1) 0.1s;

  /* PERFORMANCE OPTIMIZATIONS */
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  /* PREVENTS SELECTING + DRAGGING */
  user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  /* PREVENTS SELECTING ON DOUBLE TAP IN IOS */
  -webkit-touch-callout: none;
  /* PREVENTS ZOOM IN ON DOUBLE TAP IOS */
  touch-action: manipulation;
}


.item-heading {
  max-width: 85%;
  font-family: 'Proxima Nova Semibold', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0.1px;
  position: relative;
  transition: 0.25s cubic-bezier(0.1, 0, 0, 1) 0.07s;
  z-index: 3;
}

@media screen and (min-width: 951px) {
  .item-heading.align-center {
    max-width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
  }
}



/* ////////// */


/* Hollanders Printers */

.item-0 {
  grid-column: 1;
  grid-row: 1 / span 6;

  background-color: #eff2f4;
  color: #e30613;
}

/* Illustration */

.item-0 .illustration-printer-wrapper {
  width: 100%;
  aspect-ratio: 1;
  position: absolute;
  bottom: 0;
  left: 0;
  box-sizing: border-box;
  transition: 0.5s cubic-bezier(0.1, 0, 0, 1);
}
  @media (min-width: 951px) {
    .item-0:hover .illustration-printer-wrapper,
    .item-0:active .illustration-printer-wrapper {
      transform: translateY(-13%);
      transition-delay: 0.1s;
    }
    .item-0:hover .item-heading,
    .item-0:active .item-heading {
      opacity: 0;
      transform: translateY(-10px);
    }
    .item-0:hover .illustration-printer-container.left,
    .item-0:active .illustration-printer-container.left {
      transform: translate(-100%, -66.5%);
      transition-duration: 0.3s;
      transition-delay: 0.1s;
    }
    .item-0:active .illustration-printer-container.right,
    .item-0:hover .illustration-printer-container.right {
      transform: translate(100%, 66.5%);
      transition-duration: 0.3s;
      transition-delay: 0.1s;
    }
  }




/* Illustration Animation */
.item-0 .illustration-printer-container {
  z-index: 2;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
  .item-0 .illustration-printer-container.left {
    z-index: 1;
    transform: translate(-66.5%, -33.5%);
    transition: transform 0.5s cubic-bezier(0.1, 0, 0, 1);
    transition-delay: 0.15s;
  }
  .item-0 .illustration-printer-container.right {
    z-index: 3;
    transform: translate(66.35%, 33.5%);
    transition: transform 0.5s cubic-bezier(0.1, 0, 0, 1);
    transition-delay: 0.15s;
  }


.item-0 .illustration-printer-top {
  z-index: 3;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(0, 0);
}

.item-0 .illustration-printer-base {
  z-index: 1;
  width: 100%;
  position: absolute;
  transform: translate(0, 0);
}

.item-0 .illustration-printer-head {
  z-index: 2;
  width: 100%;
  position: absolute;
  transform: translate(0, 0);
  animation: printerHeadAnimation 3.8s infinite;
}


/* Keyframes: Printer Headr Illustration */
@keyframes printerHeadAnimation {
  0% {
    transform: translate(0, 0);
  }
  40% {
    transform: translate(45%, 22.85%);
  }
  50% {
    transform: translate(45%, 22.85%);
  }
  90% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}


/* 6 Colors Ink */

.item-1 {
  grid-column: 2;
  grid-row: 1 / span 4;

  background-color: #181821;
  color: #fff;
}

.item-1 .colors-container {
  position: absolute;
  left: 0;
  bottom: 37px;
  padding: inherit;
  box-sizing: border-box;
  display: flex;
  gap: 2px;
}
.item-1 .colors-container div {
  width: 22px;
  height: 22px;
  border-radius: 100%;
  transition: 0.5s cubic-bezier(0.1, 0, 0, 1);
}
  .item-1 .colors-container .c {
    background-color: #009fe3;
  }
  .item-1 .colors-container .m {
    background-color: #e6007e;
    transition-delay: 0.025s;
  }
  .item-1 .colors-container .y {
    background-color: #ffed00;
    transition-delay: 0.05s;
  }
  .item-1 .colors-container .k {
    background-color: #45454f;
    transition-delay: 0.075s;
  }
  .item-1 .colors-container .v {
    background-color: #6f3eff;
    transition-delay: 0.1s;
  }
  .item-1 .colors-container .o {
    background-color: #ff7800;
    transition-delay: 0.125s;
  }


.item-1 .subtext {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: inherit;
  box-sizing: border-box;
  display: flex;
  gap: 2px;

  font-family: 'Proxima Nova Semibold', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0.1px;
}


  @media (min-width: 951px) {
    .item-1 .colors-container {
      bottom: 0;
    }
    .item-1:hover .colors-container div,
    .item-1:active .colors-container div {
      transform: translateY(-50px);
    }
    .item-1 .subtext {
      opacity: 0;
      transition: 0.25s cubic-bezier(0.1, 0, 0, 1);
      transform: translateY(10px);
    }
      .item-1:hover .subtext,
      .item-1:active .subtext {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.22s;
      }
  }

  


/* Cutting Tables */

.item-2 {
  grid-column: 3;
  grid-row: 1 / span 4;

  background-color: #adacb2;
  color: #fff;
  position: relative;
}
  .item-2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(0,0,0,0) 20%, rgba(0,0,0,0.4009978991596639) 80%);
    transition: 0.25s cubic-bezier(0.1, 0, 0, 1) 0.07s;
    z-index: 2;
  }

.item-2 img {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateY(0) translateZ(0);
  transition: transform 0.55s cubic-bezier(0.1, 0, 0, 1) 0.07s, opacity 0.25s ease-out /* (Lazy Load Fade-in Effect) */;
  z-index: 1;
  backface-visibility: hidden;
}

  @media (min-width: 951px) {
    .item-2:hover img,
    .item-2:active img {
      transform: scale(1.1) translateZ(0);
    }
    .item-2:hover .item-heading,
    .item-2:active .item-heading {
      opacity: 0;
      transform: translateY(-10px) translateZ(0);
    }
    .item-2:hover::before,
    .item-2:active::before {
      opacity: 0;
    }
  }






/* Tracking System */

.item-3 {
  grid-column: 1;
  grid-row: 7 / span 4;

  background-color: #e30613;
  color: #fff;
}


/* Illustration Animation */

.item-3 .illustration-tracking-container {
  height: 100%;
  width: 100%;
}

.item-3 .illustration-tracking-container .screen {
  width: 90px;
  position: absolute;
  bottom: 0;
  left: -27px;
}

.item-3 .illustration-tracking-container .data {
  width: 220px;
  position: absolute;
  bottom: 34px;
  bottom: clamp(25px, calc(12px + 2vw), 45px);
  left: 75px;
}
  .illustration-tracking-container .data-1 {
    transform: translateX(15%);
  }
  .illustration-tracking-container .data-3 {
    transform: translateX(30%);
  }



  /* Desktop Styles: (With Hover Effect) */
  @media (min-width: 951px) {
    .item-3:hover .item-heading,
    .item-3:active .item-heading {
      opacity: 0;
      transform: translateX(-10px);
    }

    .item-3 .illustration-tracking-container .screen {
      display: block;
      width: 156px;
      top: 50%;
      bottom: unset;
      left: -60px;
      transform: translateY(-50%) translateX(-100%);
      transition: 0.5s cubic-bezier(0.1, 0, 0, 1);
      visibility: hidden;
    }
      .item-3:hover .illustration-tracking-container .screen,
      .item-3:active .illustration-tracking-container .screen {
        transform: translateY(-50%) translateX(0);
        visibility: visible;
        transition-delay: 0.07s;
      }

    .item-3 .illustration-tracking-container .data {
      width: 350px;
      top: 50%;
      right: 0;
      bottom: unset;
      left: unset;
      transform: translateY(-50%) translateX(70%);
      transition: 0.5s cubic-bezier(0.1, 0, 0, 1);
    }
      .item-3:hover .illustration-tracking-container .data-1,
      .item-3:active .illustration-tracking-container .data-1 {
        transform: translateY(-50%) translateX(65%);
        transition-delay: 0.07s;
      }
      .item-3:hover .illustration-tracking-container .data-2,
      .item-3:active .illustration-tracking-container .data-2 {
        transform: translateY(-50%) translateX(50%);
        transition-delay: 0.07s;
      }
      .item-3:hover .illustration-tracking-container .data-3,
      .item-3:active .illustration-tracking-container .data-3 {
        transform: translateY(-50%) translateX(80%);
        transition-delay: 0.07s;
      }
  }

  @media (min-width: 1100px) {
    .item-3 .illustration-tracking-container .screen {
      left: -50px;
    }
    
    .item-3 .illustration-tracking-container .data {
      transform: translateY(-50%) translateX(60%);
    }
      .item-3:hover .illustration-tracking-container .data-1,
      .item-3:active .illustration-tracking-container .data-1 {
        transform: translateY(-50%) translateX(50%);
      }
      .item-3:hover .illustration-tracking-container .data-2,
      .item-3:active .illustration-tracking-container .data-2 {
        transform: translateY(-50%) translateX(35%);
      }
      .item-3:hover .illustration-tracking-container .data-3,
      .item-3:active .illustration-tracking-container .data-3 {
        transform: translateY(-50%) translateX(65%);
      }
  }







/* Confection */

.item-4 {
  grid-column: 2;
  grid-row: 5 / span 6;

  background-color: #181821;
  color: #fff;
}

.item-4 .team-container {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: inherit;
  box-sizing: border-box;
  display: flex;
  gap: 4px;
  width: 100%;
  max-width: 100%;
}

.item-4 .team-container div {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 100%;
  overflow: hidden;
  transition: 0.5s cubic-bezier(0.1, 0, 0, 1);
}

.item-4 .team-container .team-photo {
  border-radius: 100%;
}
  .item-4 .team-container .team-photo img {
    width: inherit;
  }

.item-4 .team-container .team-more {
  background-color: #fff;

  font-family: 'Proxima Nova Bold', Helvetica, Arial, sans-serif;
  font-size: clamp(13px, calc(11px + 1vw), 17.5px);
  color: #181821;
  line-height: 1;
  letter-spacing: 0.35px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* Automatic Folding Machine */

/* Mobile Styles: (NO Hover Effect) */

.item-5 {
  grid-column: 3;
  grid-row: 5 / span 3;
  background-color: #eff2f4;
  color: #e30613;
}

.item-5 .illustration-folding-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
  @media screen and (min-width: 951px) and (max-width: 1100px) {
    .item-5 .illustration-folding-container {
      transform: scale(0.85) translateX(10px);
      transform-origin: right;
      will-change: transform;
    }
  }

.item-5 .illustration-folding-container .folding {
  width: 85px;
  position: absolute;
  left: clamp(25px, calc(12px + 2vw), 45px);
  bottom: clamp(25px, calc(12px + 2vw), 45px);
}
  .item-5 .illustration-folding-container .top {
    --fill-color: #e30613;
    display: none;
  }
  .item-5 .illustration-folding-container .middle {
    --fill-color: #181821;
    display: none;
  }
  .item-5 .illustration-folding-container .bottom {
    --fill-color: #e30613;
  }


/* Desktop Styles: (With Hover Effect) */

@media (min-width: 951px) {
  /* Container */
  .item-5 .illustration-folding-container .folding {
    width: 75px;
    right: 45px;
    left: unset;
    bottom: unset;
    transform: translateY(-50%);
    /* De transition is verplaatst naar de elementen die daadwerkelijk animeren. */
  }

  /* Basisstijlen voor alle geanimeerde elementen */
  .item-5 .illustration-folding-container .top,
  .item-5 .illustration-folding-container .middle,
  .item-5 .illustration-folding-container .bottom {
    display: block;
    position: absolute;
    transition: transform 0.35s cubic-bezier(0, 0, 0, 1);
    will-change: transform;
  }

  /* Top */
  .item-5 .illustration-folding-container .top {
    z-index: 3;
    transform: translateY(-300%);
  }
    .item-5:hover .illustration-folding-container .top,
    .item-5:active .illustration-folding-container .top {
      transform: translateY(94.5%);
      transition-delay: 0.225s;
    }

  /* Middle */
  .item-5 .illustration-folding-container .middle {
    z-index: 2;
    transform: translateY(-225%);
    transition-delay: 0.1s;
  }
    .item-5:hover .illustration-folding-container .middle,
    .item-5:active .illustration-folding-container .middle {
      transform: translateY(166%);
      transition-delay: 0.15s;
    }

  /* Bottom */
  .item-5 .illustration-folding-container .bottom {
    transform: translateY(168%);
    transition-delay: 0.1s;
  }
    .item-5:hover .illustration-folding-container .bottom,
    .item-5:active .illustration-folding-container .bottom {
      transform: translateY(239%);
    }
}





/* Robots */

.item-6 {
  grid-column: 3;
  grid-row: 8 / span 3;

  background-color: #e30613;
  color: #fff;
}

.item-6 .illustration-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.item-6 .illustration-container .antenna {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 145px;
  height: 143px;
}

.item-6 .illustration-container .face {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 145px;
  height: 143px;
  transform: translateY(10px);
}

  /* Desktop: (With Hover Effect) */

  @media (min-width: 951px) {
    .item-6 .illustration-container .antenna {
      transform: translateY(15px);
      transition: 0.35s cubic-bezier(0.1, 0, 0, 1);
    }
      .item-6:hover .illustration-container .antenna,
      .item-6:active .illustration-container .antenna {
        transform: translateY(-15px);
      }

    .item-6 .illustration-container .face {
      transition: 0.35s cubic-bezier(0.1, 0, 0, 1);
    }
      .item-6:hover .illustration-container .face,
      .item-6:active .illustration-container .face {
          transform: translateY(0);
        }
  }






  @media (max-width: 950px) {
    .production-bento {
      display: flex;
      gap: 8px;
    }
    
    .item {
      display: block;
      min-width: 260px;
      height: 410px;
    }

    .item-0 {
      grid-column: unset;
      grid-row: unset;
    }
    
    .item-1 {
      grid-column: unset;
      grid-row: unset;
    }
    
    .item-2 {
      grid-column: unset;
      grid-row: unset;
    }
    
    .item-3 {
      grid-column: unset;
      grid-row: unset;
    }

    .item-4 {
      grid-column: unset;
      grid-row: unset;
    }
    
    .item-5 {
      grid-column: unset;
      grid-row: unset;
    }
    
    .item-6 {
      grid-column: unset;
      grid-row: unset;
    }
    
  }