.mask-banner-full .htb-container {
    z-index: 3;
    position: relative;
}

.mask-banner-full .grid-container {
    max-width: 100vw;
    width: 100%;
    height: 801px;
    aspect-ratio: 6/3;
    display: grid;
    grid-template-rows: repeat(10, 1fr);
    background: transparent;
    margin: 0;
    text-align: justify;
    text-align-last: justify;
    position: absolute;
    z-index: 2; 
}

.mask-banner-full .grid-box {
    background: var(--mask-red-1);
}

/** desktop **/
@media only screen and (min-width: 1140px) {
  .mask-banner-full .grid-container {
    /* grid-template-columns: minmax(1vw,10vw) repeat(8, 1fr) minmax(1vw, 10vw); */
    grid-template-columns: 1fr repeat(8, minmax(0, calc(1200px / 8))) 1fr;
}

  /* Left white column */
  .mask-banner-full .grid-box:nth-child(59)  {
    grid-column: 1 / 2;
    grid-row: 1 / -1;
    background: white;
  }

  /* Right white column */
  .mask-banner-full .grid-box:nth-child(60)  {
    grid-column: 10 / 11;
    grid-row: 4 / -1;
    background: white;
  }
      
    /* Right white column */
  .mask-banner-full .grid-box:nth-child(61)  {
      grid-column: 10 / 11;
      grid-row: 1 / 3;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
      background: transparent;
  }

  .mask-banner-full .grid-box:nth-child(62)  {
    grid-column: 10 / 11;
    grid-row: 2 / 4;
    clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%);
    background: white;
  }
      
  /* first row */
  .mask-banner-full .grid-box:nth-child(1) {
    grid-row: 1/2;
    grid-column: 2/4;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    background:white;
  }

  .mask-banner-full .grid-box:nth-child(2) {
    grid-row: 1/2;
    grid-column: 4/6;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    background:white;
  }

  .mask-banner-full .grid-box:nth-child(3) {
    grid-row: 1/2;
    grid-column: 6/8;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    background:transparent;
  }

  .mask-banner-full .grid-box:nth-child(4) {
    grid-row: 1/2;
    grid-column: 8/10;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    background:transparent;
  }

  /* second row */
  /*side triangle*/
  .mask-banner-full .grid-box:nth-child(5) {
    grid-row: 1/3;
    grid-column: 2;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    background:white;
  }

  /* diamond */
  .mask-banner-full .grid-box:nth-child(6) {
    grid-row: 1/3;
    grid-column: 3/5;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    background:white;
  }

  /* diamond */
  .mask-banner-full .grid-box:nth-child(7) {
    grid-row: 1/3;
    grid-column: 5/7;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    background:transparent;
  }

  .mask-banner-full .grid-box:nth-child(8) {
    grid-row: 1/3;
    grid-column: 7/9;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    background:transparent;
  }

  .mask-banner-full .grid-box:nth-child(9) {
    grid-row: 1/3;
    grid-column: 9 /10;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    background:transparent;
  }

  /*third row */
  /* diamond */
  .mask-banner-full .grid-box:nth-child(10) {
    grid-row: 2/4;
    grid-column: 2/4;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    background: white;
  }

  .mask-banner-full .grid-box:nth-child(11) {
    grid-row: 2/4;
    grid-column: 4/6;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    background: transparent;
  }

  .mask-banner-full .grid-box:nth-child(12) {
    grid-row: 2/4;
    grid-column: 6/8;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    background:transparent;
  }

  .mask-banner-full .grid-box:nth-child(13) {
    grid-row: 2/4;
    grid-column: 8/10;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    background:transparent;
  }

  /* fourth row */
  /*side triangle*/
  .mask-banner-full .grid-box:nth-child(14) {
    grid-row: 3/5;
    grid-column: 2;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    background:white;
  }

  /* diamond */
  .mask-banner-full .grid-box:nth-child(15) {
    grid-row: 3/5;
    grid-column: 3/5;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
  clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
      background: #FFF;
  }

  .mask-banner-full .grid-box:nth-child(15):after {
    content: "";
    position: absolute;
    background: var(--mask-red-1);
    -webkit-clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    top: 0px;
    left: 1px;
    right: 2px;
    bottom: 3px;
  }
      
  /* diamond */
  .mask-banner-full .grid-box:nth-child(16) {
    grid-row: 3/5;
    grid-column: 5/7;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    background: transparent;
  }

  /* half triangle - left */
  .mask-banner-full .grid-box:nth-child(17) {
    grid-row: 3/5;
    grid-column: 7;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    background: transparent;
  }

  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(18) {
    grid-row: 3/5;
    grid-column: 8;
    clip-path: polygon(0 1%, 0 100%, 100% 50%);
    background: transparent;
  }

  /* half triangle - left */
  .mask-banner-full .grid-box:nth-child(19) {
    grid-row: 3/5;
    grid-column: 9;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    background: white;
  }

  /* fifth row */
  /* diamond */
  .mask-banner-full .grid-box:nth-child(20) {
    grid-row: 4/6;
    grid-column: 2/3;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
  }

  .mask-banner-full .grid-box:nth-child(21) {
    grid-row: 4/6;
    grid-column: 3/4;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background: #000;
  }

  .mask-banner-full .grid-box:nth-child(21):after {
    content: "";
    position: absolute;
    background: var(--mask-red-1);
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    top: 1px;
    left: 1px;
    right: 3px;
    bottom: 2px;
  }
        
  .mask-banner-full .grid-box:nth-child(22) {
    grid-row: 4/6;
    grid-column: 4/6;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
  }

  /* half triangle - left */
  .mask-banner-full .grid-box:nth-child(23) {
    grid-row: 4/6;
    grid-column: 6;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    opacity: 0.5;
  }

  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(24) {
    grid-row: 4/6;
    grid-column: 7;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    background: transparent;
  }

  /* diamond */
  .mask-banner-full .grid-box:nth-child(25) {
    grid-row: 4/6;
    grid-column: 8/10;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    background:white;
  }

  /* sixth row */
  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(26) {
    grid-row: 5/7;
    grid-column: 2;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
  }

  /* diamond */
  .mask-banner-full .grid-box:nth-child(27) {
    grid-row: 5/7;
    grid-column: 3/5;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
  }

  /* diamond */
  .mask-banner-full .grid-box:nth-child(28) {
    grid-row: 5/7;
    grid-column: 5/7;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    background:transparent;
  }

  /* diamond */
  .mask-banner-full .grid-box:nth-child(29) {
    grid-row: 5/7;
    grid-column: 7/9;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    background:white;
  }

  .mask-banner-full .grid-box:nth-child(30) {
    grid-row: 5/7;
    grid-column: 9;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    background: white;
  }

  /* seventh row */
  /* half triangle - left */
  .mask-banner-full .grid-box:nth-child(31) {
    grid-row: 6 / 8;
    grid-column: 2;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
  }

  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(32) {
    grid-row: 6 / 8;
    grid-column: 3;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    background: var(--mask-red-2);
  }


  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(33) {
    grid-row: 6 / 8;
    grid-column: 5;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    background: transparent;
  }

  /* diamond */
  .mask-banner-full .grid-box:nth-child(34) {
    grid-row: 6 / 8;
    grid-column: 6/8;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    background:white;
  }

  /* diamond */
  .mask-banner-full .grid-box:nth-child(35) {
    grid-row: 6 / 8;
    grid-column: 8/10;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    background:white;
  }

  /* eighth row */
  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(36) {
    grid-row: 7 / 9;
    grid-column: 2;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    background: #000;
  }

  .mask-banner-full .grid-box:nth-child(36):after {
    content: "";
    position: absolute;
    background: var(--mask-red-1);
    -webkit-clip-path: polygon(0 0, 0 100%, 100% 50%);
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    top: 1px;
    left: 1px;
    right: 1px;
    bottom: 1px;
  }
    
  /* half triangle - left */
  .mask-banner-full .grid-box:nth-child(37) {
    grid-row: 7 / 9;
    grid-column: 3;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    background: var(--mask-red-3);
  }

  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(38) {
    grid-row: 6 / 9;
    grid-column: 4;
    clip-path: polygon(100% 0, 100% 66%, 0 100%, 0 33%);
    opacity:0.7;
  }

  /* half triangle - left */
  .mask-banner-full .grid-box:nth-child(39) {
    grid-row: 7 / 9;
    grid-column: 5;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    background: transparent;
  }

  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(40) {
    grid-row: 7 / 9;
    grid-column: 6;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    background:white;
  }

  /* diamond */
  .mask-banner-full .grid-box:nth-child(41) {
    grid-row: 7 / 9;
    grid-column: 7 /9;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    background:white;
  }

  .mask-banner-full .grid-box:nth-child(42) {
    grid-row: 7 / 9;
    grid-column: 9;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    background: white;
  }

  /* nineth row */
  /* half triangle - left */
  .mask-banner-full .grid-box:nth-child(43) {
    grid-row: 8 / 10;
    grid-column: 2;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    background: transparent;
  }

  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(44) {
    grid-row: 8 / 10;
    grid-column: 3;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    background: var(--mask-red-4);;
  }

  /* half triangle - left */
  .mask-banner-full .grid-box:nth-child(45) {
    grid-row: 8 / 10;
    grid-column: 4;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    background: transparent;
  }

  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(46) {
    grid-row: 8 / 10;
    grid-column: 5;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    background:transparent;
  }

  .mask-banner-full .grid-box:nth-child(47) {
    grid-row: 8 / 10;
      grid-column: 6 / 8;
      clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
      background: white;
  }

  .mask-banner-full .grid-box:nth-child(48) {
    grid-row: 8 / 10;
      grid-column: 8 / 10;
      clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
      background: white;
  }

  /* tenth row */
  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(49) {
      grid-row: 9 / 11;
      grid-column: 2;
      clip-path: polygon(0 0, 0 100%, 100% 50%);
    background:white;
  }

  .mask-banner-full .grid-box:nth-child(50) {
    grid-row: 10;
    grid-column: 2/4;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    background: white;
  }

  /* half triangle - left */
  .mask-banner-full .grid-box:nth-child(51) {
    grid-row: 9 / 11;
    grid-column: 3;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    background: var(--mask-red-5);
  }

  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(52) { 
    grid-row: 9 / 11;
    grid-column: 4;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    background:transparent;
  }

  .mask-banner-full .grid-box:nth-child(53) {
    grid-row: 10;
    grid-column: 4/6;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    background: white;
  }

  .mask-banner-full .grid-box:nth-child(54) {
    grid-row: 9 / 11;
    grid-column: 5 /7;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    background:white;
  }

  .mask-banner-full .grid-box:nth-child(55) {
    grid-row: 9 / 11;
    grid-column: 7 / 9;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    background:white;
  }

  .mask-banner-full .grid-box:nth-child(56) {
      grid-row:  9 / 11;
      grid-column: 9;
      clip-path: polygon(100% 0, 0 50%, 100% 100%);
      background: white;
  }

  .mask-banner-full .grid-box:nth-child(57) {
      grid-row: 10;
      grid-column: 6 /8;
      clip-path: polygon(50% 0, 0 100%, 100% 100%);
      background: white;
  }

  .mask-banner-full .grid-box:nth-child(58) {
      grid-row: 10;
      grid-column: 8 / 10;
      clip-path: polygon(50% 0, 0 100%, 100% 100%);
      background: white;
  }
}


/** tablet **/
@media only screen and (min-width: 650px) and (max-width: 1139px) {
  .mask-banner-full .grid-container {
    grid-template-columns: repeat(5, 1fr);
  }

  /* first row */
  .mask-banner-full .grid-box:nth-child(1) {
    grid-row: 1/2;
    grid-column: 1/3;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    background:white;
  }
  
  .mask-banner-full .grid-box:nth-child(2) {
    grid-row: 1/2;
    grid-column: 3/5;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    background:white;
  }
  
  .mask-banner-full .grid-box:nth-child(3) {
    grid-row: 1/2;
    grid-column: 5/7;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    background:transparent;
  }

  /* second row */
  /*side triangle*/
  .mask-banner-full .grid-box:nth-child(4) {
    grid-row: 1/3;
    grid-column: 1;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    background:white;
  }

  /* diamond */
  .mask-banner-full .grid-box:nth-child(5) {
    grid-row: 1/3;
    grid-column: 2/4;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    background:white;
  }

  /* diamond */
  .mask-banner-full .grid-box:nth-child(6) {
    grid-row: 1/3;
    grid-column: 4/6;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    background:transparent;
  }
  
  /*third row */
  /* diamond */
  .mask-banner-full .grid-box:nth-child(7) {
    grid-row: 2/4;
    grid-column: 1/3;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    background: white;
  }

  .mask-banner-full .grid-box:nth-child(8) {
    grid-row: 2/4;
    grid-column: 3/5;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    background: transparent;
  }

  .mask-banner-full .grid-box:nth-child(9) {
    grid-row: 2/4;
    grid-column: 5/7;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    background:transparent;
  }

  /* fourth row */
  /*side triangle*/
  .mask-banner-full .grid-box:nth-child(10) {
    grid-row: 3/5;
    grid-column: 1;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    background:white;
  }
  
  /* diamond */
  .mask-banner-full .grid-box:nth-child(11) {
    grid-row: 3/5;
    grid-column: 2/4;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
  }
  
  /* diamond */
  .mask-banner-full .grid-box:nth-child(12) {
    grid-row: 3/5;
    grid-column: 4/6;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    background: transparent;
  }

  /* fifth row */
  /* diamond */
  .mask-banner-full .grid-box:nth-child(13) {
    grid-row: 4/6;
    grid-column: 1/3;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
  }
  
  .mask-banner-full .grid-box:nth-child(14) {
    grid-row: 4/6;
    grid-column: 3/5;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
  }
  
  /* half triangle - left */
  .mask-banner-full .grid-box:nth-child(15) {
    grid-row: 4/6;
    grid-column: 5;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    opacity: 0.5;
  }
  
  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(16) {
    grid-row: 4/6;
    grid-column: 6;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    background: transparent;
  }

  /* sixth row */
  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(17) {
      grid-row: 5/7;
      grid-column: 1;
      clip-path: polygon(0 0, 0 100%, 100% 50%);
  }
  
  /* diamond */
  .mask-banner-full .grid-box:nth-child(18) {
    grid-row: 5/7;
    grid-column: 2/4;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
  }
  
  /* diamond */
  .mask-banner-full .grid-box:nth-child(19) {
    grid-row: 5/7;
    grid-column: 4/6;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    background:transparent;
  }

  /* seventh row */
  /* half triangle - left */
  .mask-banner-full .grid-box:nth-child(20) {
    grid-row: 6 / 8;
    grid-column: 1;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
  }
  
  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(21) {
    grid-row: 6 / 8;
    grid-column: 2;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    background: var(--mask-red-2);
  }
  
  /* half triangle - left */
  .mask-banner-full .grid-box:nth-child(22) {
    grid-row: 6 / 8;
    grid-column: 3;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    opacity:0.7;
  }
  
  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(23) {
    grid-row: 6 / 8;
    grid-column: 4;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    background: transparent;
  }
  
  /* diamond */
  .mask-banner-full .grid-box:nth-child(24) {
    grid-row: 6 / 7;
    grid-column: 5/ 6;
    clip-path: polygon(0 100%, 100% 100%, 100% 0);
    background:white;
  }

  /* eighth row */
  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(25) {
      grid-row: 7 / 9;
      grid-column: 1;
      clip-path: polygon(0 0, 0 100%, 100% 50%);
  }
  
  /* half triangle - left */
  .mask-banner-full .grid-box:nth-child(26) {
    grid-row: 7 / 9;
    grid-column: 2;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    background: var(--mask-red-3);
  }
  
  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(27) {
      grid-row: 7 / 9;
    grid-column: 3;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    opacity:0.7;
  }
  
  /* half triangle - left */
  .mask-banner-full .grid-box:nth-child(28) {
    grid-row: 7 / 9;
    grid-column: 4;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    background: transparent;
  }
  
  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(29) {
    grid-row: 7 / 8;
    grid-column: 5;
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
    background:white;
  }

  /* nineth row */
  /* half triangle - left */
  .mask-banner-full .grid-box:nth-child(30) {
    grid-row: 8 / 10;
    grid-column: 1;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    background: transparent;
  }
  
  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(31) {
    grid-row: 8 / 10;
    grid-column: 2;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
  background:var(--mask-red-4);
  }
  
  /* half triangle - left */
  .mask-banner-full .grid-box:nth-child(32) {
    grid-row: 8 / 10;
    grid-column: 3;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    background: transparent;
  }
  
  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(33) {
    grid-row: 8 / 10;
    grid-column: 4;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    background:transparent;
  }
  
  .mask-banner-full .grid-box:nth-child(34) {
    grid-row: 8 / 10;
      grid-column: 5 / 7;
      clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
      background: white;
  }

    /* tenth row */
  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(35) {
      grid-row: 9 / 11;
      grid-column: 1;
      clip-path: polygon(0 0, 0 100%, 100% 50%);
    background:white;
  }
  
  .mask-banner-full .grid-box:nth-child(36) {
    grid-row: 10;
    grid-column: 1/3;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    background: white;
  }
  
  /* half triangle - left */
  .mask-banner-full .grid-box:nth-child(37) {
      grid-row: 9 / 11;
    grid-column: 2;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    background: var(--mask-red-5);
  }
  
  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(38) { 
    grid-row: 9 / 11;
    grid-column: 3;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    background:transparent;
  }
  
  .mask-banner-full .grid-box:nth-child(39) {
    grid-row: 10;
    grid-column: 3/5;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    background: white;
  }
  
  .mask-banner-full .grid-box:nth-child(40) {
    grid-row: 9 / 11;
    grid-column: 4 /6;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    background:white;
  }

  .mask-banner-full .grid-box:nth-child(41) {
    grid-row: 10 / 11;
    grid-column: 5 /6;
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
    background:white;
  }
}

@media only screen and (min-width: 450px) and (max-width: 649px) {
  .mask-banner-full .grid-container {
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* first row */
  .mask-banner-full .grid-box:nth-child(1) {
    grid-row: 1/2;
    grid-column: 1/3;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    background:white;
  }
  
  .mask-banner-full .grid-box:nth-child(2) {
    grid-row: 1/2;
    grid-column: 3/5;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    background:white;
  }
  
  /* second row */
  /*side triangle*/
  .mask-banner-full .grid-box:nth-child(3) {
    grid-row: 1/3;
    grid-column: 1;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    background:white;
  }

  /* diamond */
  .mask-banner-full .grid-box:nth-child(4) {
    grid-row: 1/3;
    grid-column: 2/4;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    background:white;
  }

  /*third row */
  /* diamond */
  .mask-banner-full .grid-box:nth-child(5) {
    grid-row: 2/4;
    grid-column: 1/3;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    background: white;
  }

  .mask-banner-full .grid-box:nth-child(6) {
    grid-row: 2/4;
    grid-column: 3/5;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    background: transparent;
  }

  /* fourth row */
  /*side triangle*/
  .mask-banner-full .grid-box:nth-child(7) {
    grid-row: 3/5;
    grid-column: 1;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    background:white;
  }
  
  /* diamond */
  .mask-banner-full .grid-box:nth-child(8) {
    grid-row: 3/5;
    grid-column: 2/4;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
  }

  /* fifth row */
  /* diamond */
  .mask-banner-full .grid-box:nth-child(9) {
    grid-row: 4/6;
    grid-column: 1/3;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
  }
  
  .mask-banner-full .grid-box:nth-child(10) {
    grid-row: 4/6;
    grid-column: 3/5;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
  }

  /* sixth row */
  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(11) {
      grid-row: 5/7;
      grid-column: 1;
      clip-path: polygon(0 0, 0 100%, 100% 50%);
  }
  
  /* diamond */
  .mask-banner-full .grid-box:nth-child(12) {
    grid-row: 5/7;
    grid-column: 2/4;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
  }

  /* seventh row */
  /* half triangle - left */
  .mask-banner-full .grid-box:nth-child(13) {
    grid-row: 6 / 8;
    grid-column: 1;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
  }
  
  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(14) {
    grid-row: 6 / 8;
    grid-column: 2;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    background: var(--mask-red-2);
  }
  
  /* half triangle - left */
  .mask-banner-full .grid-box:nth-child(15) {
    grid-row: 6 / 8;
    grid-column: 3;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    opacity:0.7;
  }
  
  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(16) {
    grid-row: 6 / 8;
    grid-column: 4;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    background: transparent;
  }

  /* eighth row */
  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(17) {
      grid-row: 7 / 9;
      grid-column: 1;
      clip-path: polygon(0 0, 0 100%, 100% 50%);
  }
  
  /* half triangle - left */
  .mask-banner-full .grid-box:nth-child(18) {
    grid-row: 7 / 9;
    grid-column: 2;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    background: var(--mask-red-3);
  }
  
  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(19) {
      grid-row: 7 / 9;
    grid-column: 3;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    opacity:0.7;
  }
  
  /* half triangle - left */
  .mask-banner-full .grid-box:nth-child(20) {
    grid-row: 7 / 9;
    grid-column: 4;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    background: transparent;
  }
  
  /* nineth row */
  /* half triangle - left */
  .mask-banner-full .grid-box:nth-child(21) {
    grid-row: 8 / 10;
    grid-column: 1;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    background: transparent;
  }
  
  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(22) {
    grid-row: 8 / 10;
    grid-column: 2;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    background: var(--mask-red-4);
  }
  
  /* half triangle - left */
  .mask-banner-full .grid-box:nth-child(23) {
    grid-row: 8 / 10;
    grid-column: 3;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    background: transparent;
  }
  
  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(24) {
    grid-row: 8 / 10;
    grid-column: 4;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    background:transparent;
  }

  /* tenth row */
  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(25) {
      grid-row: 9 / 11;
      grid-column: 1;
      clip-path: polygon(0 0, 0 100%, 100% 50%);
    background:white;
  }
  
  .mask-banner-full .grid-box:nth-child(26) {
    grid-row: 10;
    grid-column: 1/3;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    background: white;
  }
  
  /* half triangle - left */
  .mask-banner-full .grid-box:nth-child(27) {
      grid-row: 9 / 11;
    grid-column: 2;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    background: var(--mask-red-5);
  }
  
  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(28) { 
    grid-row: 9 / 11;
    grid-column: 3;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    background:transparent;
  }
  
  .mask-banner-full .grid-box:nth-child(29) {
    grid-row: 10;
    grid-column: 3/5;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    background: white;
  }
  
  .mask-banner-full .grid-box:nth-child(30) {
    grid-row: 9 / 11;
    grid-column: 4;
    clip-path: polygon(0 50%, 100% 0, 100% 100%, 50% 100%);
    background:white;
  }
}
/** mobile **/
@media only screen and (max-width: 449px) {
  .mask-banner-full .grid-container {
    grid-template-columns: repeat(3, 1fr);
  }

  /* first second row */
  .mask-banner-full .grid-box:nth-child(1) {
    grid-row: 1/3;
    grid-column: 1/3;
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
    background:white;
  }

  .mask-banner-full .grid-box:nth-child(2) {
    grid-row: 1/2;
    grid-column: 3/4;
    clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0);
    background: white;
  }

  .mask-banner-full .grid-box:nth-child(3) {
    grid-row: 2/3;
    grid-column: 3/4;
    clip-path: polygon(0 0, 0 100%, 100% 0);
    background: white;
  }
  
  /*third row */
  /* diamond */
  .mask-banner-full .grid-box:nth-child(4) {
    grid-row: 2/4;
    grid-column: 1/3;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
    background: white;
  }

  /* fourth row */
  /*side triangle*/
  .mask-banner-full .grid-box:nth-child(5) {
    grid-row: 3/5;
    grid-column: 1;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    background:white;
  }
  
  /* diamond */
  .mask-banner-full .grid-box:nth-child(6) {
    grid-row: 3/5;
    grid-column: 2/4;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
  }

  /* fifth row */
  /* diamond */
  .mask-banner-full .grid-box:nth-child(7) {
    grid-row: 4/6;
    grid-column: 1/3;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
  }
  
  .mask-banner-full .grid-box:nth-child(8) {
    grid-row: 4/6;
    grid-column: 3/4;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
  }

  /* sixth row */
  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(9) {
      grid-row: 5/7;
      grid-column: 1;
      clip-path: polygon(0 0, 0 100%, 100% 50%);
  }
  
  /* diamond */
  .mask-banner-full .grid-box:nth-child(10) {
    grid-row: 5/7;
    grid-column: 2/4;
    clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
  }

  /* seventh row */
  /* half triangle - left */
  .mask-banner-full .grid-box:nth-child(11) {
    grid-row: 6 / 8;
    grid-column: 1;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
  }
  
  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(12) {
    grid-row: 6 / 8;
    grid-column: 2;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    background: var(--mask-red-2);
  }
  
  /* half triangle - left */
  .mask-banner-full .grid-box:nth-child(13) {
    grid-row: 6 / 8;
    grid-column: 3;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    opacity:0.7;
  }
  
  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(14) {
    grid-row: 6 / 8;
    grid-column: 4;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    background: transparent;
  }

  /* eighth row */
  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(15) {
      grid-row: 7 / 9;
      grid-column: 1;
      clip-path: polygon(0 0, 0 100%, 100% 50%);
  }

    .mask-banner-full .grid-box:nth-child(15) {
      grid-row: 7 / 9;
      grid-column: 1;
      clip-path: polygon(0 0, 0 100%, 100% 50%);
  }
  
  /* half triangle - left */
  .mask-banner-full .grid-box:nth-child(16) {
    grid-row: 7 / 9;
    grid-column: 2;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    background: var(--mask-red-3);
  }
  
  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(17) {
      grid-row: 7 / 9;
    grid-column: 3;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    opacity:0.7;
  }
  
  /* half triangle - left */
  .mask-banner-full .grid-box:nth-child(18) {
    grid-row: 7 / 9;
    grid-column: 4;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    background: transparent;
  }
  
  /* nineth row */
  /* half triangle - left */
  .mask-banner-full .grid-box:nth-child(19) {
    grid-row: 8 / 10;
    grid-column: 1;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    background: transparent;
  }
  
  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(20) {
    grid-row: 8 / 10;
    grid-column: 2;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    background: var(--mask-red-4);    
  }
  
  /* half triangle - left */
  .mask-banner-full .grid-box:nth-child(21) {
    grid-row: 8 / 10;
    grid-column: 3;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    background: transparent;
  }
  
  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(22) {
    grid-row: 8 / 10;
    grid-column: 4;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    background:transparent;
  }

  /* tenth row */
  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(23) {
      grid-row: 9 / 11;
      grid-column: 1;
      clip-path: polygon(0 0, 0 100%, 100% 50%);
    background:white;
  }
  
  .mask-banner-full .grid-box:nth-child(24) {
    grid-row: 10;
    grid-column: 1/3;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
    background: white;
  }
  
  /* half triangle - left */
  .mask-banner-full .grid-box:nth-child(25) {
    grid-row: 9 / 11;
    grid-column: 2;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    background: var(--mask-red-5);
  }
  
  /* half triangle - right */
  .mask-banner-full .grid-box:nth-child(26) { 
    grid-row: 9 / 11;
    grid-column: 3;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
    background:transparent;
  }
  
  .mask-banner-full .grid-box:nth-child(27) {
    grid-row: 10;
    grid-column: 3/4;
    clip-path: polygon(100% 0, 0 100%, 100% 100%);
    background: white;
  }
}