.mask-background-01 .grid-container {
    height: 450px;
    width: 310px;
    position: absolute;
    right: 0;
    top: -45%;
    z-index: 3;
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    grid-template-columns: repeat(2, 1fr);
}

.mask-background-01 .grid-box:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
    background: var(--mask-red-4);
}

.mask-background-01 .grid-box:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
    background:var(--mask-red-4);
}

.mask-background-01 .grid-box:nth-child(3) {
    grid-column: 1 / 2;
    grid-row: 2 / 5;
    clip-path: polygon(0 0, 100% 33%, 100% 100%, 0 66%);
    -webkit-clip-path: polygon(0 0, 100% 33%, 100% 100%, 0 66%);
    background:var(--mask-red-5);
}

.mask-background-01 .grid-box:nth-child(4) {
    grid-column: 2 / 3;
    grid-row: 2 / 4;
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);
    background:var(--mask-red-3);
}

.mask-background-01 .grid-box:nth-child(5) {
    grid-column: 2 / 3;
    grid-row: 3 / 5;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
    background: #FFF;
}

.mask-background-01 .grid-box:nth-child(6) {
    grid-column: 2 / 3;
    grid-row: 4 / 6;
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);
    background:var(--mask-red-6);
}

.mask-background-02 .grid-container {
    height: 450px;
    width: 150px;
    position: absolute;
    left: 0;
    top: -15%;
    z-index: -1;
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    grid-template-columns: repeat(1, 1fr);
}

.mask-background-02 .grid-box:nth-child(1) {
    grid-column: 1;
    grid-row: 2 / 5;
    clip-path: polygon(100% 0, 100% 66%, 0 100%, 0 33%);
    -webkit-clip-path:polygon(100% 0, 100% 66%, 0 100%, 0 33%);
    background: var(--mask-red-2);
}

.mask-background-02 .grid-box:nth-child(1):after {
      content: "";
      position: absolute;
      background: #FFF;
      -webkit-clip-path: polygon(100% 0, 100% 66%, 0 100%, 0 33%);
      clip-path: polygon(100% 0, 100% 66%, 0 100%, 0 33%);
      top: 1px;
      left: 1px;
      right: 1px;
      bottom: 2px;
}

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

.mask-background-02 .grid-box:nth-child(3) {
    grid-column: 1;
    grid-row: 5 / 7;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
    background: #da3e52;
}

.mask-background-02 .grid-box:nth-child(3)::after {
    content: "";
    position: absolute;
    background: var(--mask-red-4);
    -webkit-clip-path:polygon(0 0, 100% 50%, 0 100%);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    top: 1px;
    left: 0px;
    right: 1px;
    bottom: 0;
}

.mask-background-03 .grid-container-left {
    height: 500px;
    width: 350px;
    position: absolute;
    left: 0;
    top: 39%;
    z-index: -1;
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    grid-template-columns: repeat(2, 1fr);
}

.mask-background-03 .grid-container-left .grid-box:nth-child(1) {
    grid-column: 2;
    grid-row: 1 / 3;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
    background:var(--mask-red-7);
}

.mask-background-03 .grid-container-left .grid-box:nth-child(2) {
    grid-column: 1;
    grid-row: 2 / 4;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
    background:var(--mask-red-8);
}

.mask-background-03 .grid-container-left .grid-box:nth-child(3) {
    grid-column: 2;
    grid-row: 3/ 5;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
    background:var(--mask-red-9);
}

.mask-background-03 .grid-container-left .grid-box:nth-child(4) {
    grid-column: 1;
    grid-row: 5 / 7;
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);
    background:var(--mask-red-10);
}

.mask-background-03 .grid-container-right {
    height: 300px;
    width: 310px;
    position: absolute;
    right: 0;
    top: 76%;
    z-index: -1;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(2, 1fr);
}

.mask-background-03 .grid-container-right .grid-box:nth-child(1) {
    grid-column: 2;
    grid-row: 2 / 4;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
    background:var(--mask-red-6);
}

.mask-background-03 .grid-container-right .grid-box:nth-child(2) {
    grid-column: 1;
    grid-row: 2 / 4;
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);
    background: var(--mask-red-3);
}

.mask-background-03 .grid-container-right .grid-box:nth-child(3) {
    grid-column: 2;
    grid-row: 1 / 3;
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 50%);
    background: var(--mask-red-11);
}

 .mask-background-04 .grid-container-left {
     height: 400px;
    width: 500px;
    position: absolute;
    left: 0;
    top: 75%;
    z-index: -1;
    display: grid;
    grid-template-rows: repeat(5, 1fr);
    grid-template-columns: repeat(4, 1fr);
}

.mask-background-04 .grid-container-left .grid-box:nth-child(1) {
    grid-column: 1;
    grid-row: 1 / 3;
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
    -webkit-clip-path: polygon(100% 0, 0 50%, 100% 100%);
    background:var(--mask-red-5);
}

.mask-background-04 .grid-container-left .grid-box:nth-child(1):after {
      content: "";
      position: absolute;
      background: #FFF;
      -webkit-clip-path: polygon(100% 0, 0 50%, 100% 100%);
      clip-path: polygon(100% 0, 0 50%, 100% 100%);
      top: 2px;
      left: 1px;
      right: 1px;
      bottom: 1px;
}
 
.mask-background-04 .grid-container-left .grid-box:nth-child(2) {
    grid-column: 1;
    grid-row: 2 / 4;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
    background:var(--mask-red-5);
}

.mask-background-04 .grid-container-left .grid-box:nth-child(3) {
    grid-column: 2;
    grid-row: 3 / 5;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
    background:var(--mask-red-11);
}

.mask-background-04 .grid-container-left .grid-box:nth-child(4) {
    grid-column: 3;
    grid-row: 3 / 5;
    clip-path:  polygon(100% 0, 0 50%, 100% 100%);
    -webkit-clip-path:  polygon(100% 0, 0 50%, 100% 100%);
    background:var(--mask-red-7);
}

.mask-background-04 .grid-container-left .grid-box:nth-child(5) {
    grid-column: 4;
    grid-row: 3 / 5;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
    background:var(--mask-red-6);
}

.mask-background-04 .grid-container-left .grid-box:nth-child(6) {
    grid-column: 2;
    grid-row: 4 / 6;
    clip-path:  polygon(100% 0, 0 50%, 100% 100%);
    -webkit-clip-path:  polygon(100% 0, 0 50%, 100% 100%);
    background:var(--mask-red-6);
}

.mask-background-04 .grid-container-left .grid-box:nth-child(7) {
    grid-column: 3;
    grid-row: 4 / 6;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
    background:var(--mask-red-3);
}

.mask-background-04 .grid-container-right {
    height: 350px;
    width: 250px;
    position: absolute;
    right: 0;
    top: 2%;
    z-index: -1;
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    grid-template-columns: repeat(2, 1fr);
}

.mask-background-04 .grid-container-right .grid-box:nth-child(1) {
    grid-column: 2;
    grid-row: 1 / 3;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
    background:var(--mask-red-7);
}

.mask-background-04 .grid-container-right .grid-box:nth-child(2) {
    grid-column: 1;
    grid-row: 2 / 4;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
    background:var(--mask-red-10);
}

.mask-background-04 .grid-container-right .grid-box:nth-child(3) {
    grid-column: 2;
    grid-row: 3/ 5;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
    background:var(--mask-red-4);
}


@media(max-width:767px){
	.mask-background-01 .grid-container {height: 18vh;width: 28vw;top: 2%;}
	.mask-background-02 .grid-container {height: 24vh;width: 16vw;top: 3.2%;}
	.mask-background-03 .grid-container-left {height: 20vh;width: 24vw;top: 51%;}
	.mask-background-03 .grid-container-right {height: 14vh;width: 26vw;top: 90%;}
}