styles.css

@media screen and (min-width: 1080px) {
    .home {
      height: 360px;
    }
    
    .cell-y {
        height: 60px;
    }
    .pawn {
        border: 15px solid transparent;
    }
  }


  @media screen and (max-width: 1080px) {
    .home {
        height: 300px;
      }
    
    .cell-y {
        height: 50px;
    }
    .pawn {
        border: 12px solid transparent
    }
  }

body {
    margin-top: 2.5%;
    text-align: center;
}

.home {
    border: 25px solid;

    display: flex;
    justify-content: space-evenly;
    align-items: center;

}

.pawn {
    border-radius: 50%;
    /* border: 15px solid transparent; */
}

.pawn1 {
    background: linear-gradient(#222, #222), 
    linear-gradient( 135deg, #FDD819 10%, #f50202 100%);
              /* linear-gradient(to right, red, purple); */
    background-origin: padding-box, border-box;
    background-repeat: no-repeat; /* this is important */
    /* background-image: linear-gradient( 135deg, #FEB692 10%, #EA5455 100%); */
}

.pawn2 {
    background: linear-gradient(#222, #222), 
                linear-gradient( #6B73FF, #000DFF );
              /* linear-gradient(to right, red, purple); */
    background-origin: padding-box, border-box;
    background-repeat: no-repeat; /* this is important */
    /* background: linear-gradient( #6B73FF, #000DFF ); */
}

.cell-x {
    height: 40px;
}

.cell-x, .cell-y {
    display: flex;
    align-items: center;
    justify-content: center;
}

.safe {
    background-color: #11030338;
    -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    
}

.Mid-home {
    height: 105px;
    text-align: center;
}

.midHomeImg {
    height: 85px;
} 

.block {
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.square {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    -ms-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    overflow: hidden;
    width: 40%;
    height: 40%;

    background: white;
  }