html,
      body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        font-family: Arial, Helvetica, sans-serif;
      }
      .main {
        height: 100%;
        width: 100%;
        background-color: #f0f0f0;
        display: grid;
        grid-template-columns: 25% 25% 50%;
        grid-template-rows: 30% 55% 15%;
      }
      #left-top-left {
        /* background-color: #a4a4a4; */
        padding: 40px;
      }
      #square {
        height: 15px;
        width: 15px;
        background-color: black;
        rotate: 45deg;
      }
      #left-top-right {
        /* background-color: #c9adad; */
        text-align: right;
        line-height: 1px;
        padding: 20px;
        padding-right: 40px;
      }
      #left-top-right h4 {
        margin-bottom: 60px;
        font-size: 16px;
        font-weight: 500;
      }
      #left-top-right h5 {
        font-size: 12px;
        font-weight: 500;
        color: #333;
      }
      #left-top-right h6{
            display: none;
        }
      #left-center {
        /* background-color: #9c6363; */
        grid-column: 1/3;
        padding: 20px 40px;
      }
      #left-center h1 {
        font-size: 6.5vw;
        line-height: 20px;
        text-transform: uppercase;
        font-family: helvetica;
        font-weight: 500;
      }
      #left-center h1:nth-child(2n) {
        text-align: right;
        padding-right: 100px;
      }
      #left-bottom {
        /* background-color: #a15050; */
        grid-column: 1/3;
        padding: 15px 40px;
      }
      #left-bottom p {
        font-size: 12px;
        font-weight: 500;
        color: #333;
        width: 65%;
      }
      #right {
        /* background-color: #9e8989; */
        grid-column: 3;
        grid-row: 1/4;
        padding: 30px 0px;
        position: relative;
        display: flex;
      }
      #right video {
        height: 100%;
        width: 80%;
        object-fit: cover;
        border-radius: 5px;
      }

      #right i {
        width: 20%;
        text-align: center;
      }
      #arrow {
        position: absolute;
        top: 50%;
        left: 50%;
        background: orangered;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        padding: 10px;
        border-radius: 50%;
        transform: translate(-50%, -50%);
      }
      #arrow i {
        font-size: 40px;
        font-weight: 50;
      }

      @media (max-width: 600px) {
        .main {
          grid-template-columns: 50% 50%;
          grid-template-rows: 4% 30% 11% 55%;
          overflow-x: hidden;
        }
        #left-top-left {
          padding: 25px;
        }
        #square {
          height: 10px;
          width: 10px;
          background-color: black;
          rotate: 45deg;
        }
        #left-top-right {
          padding:30px 25px;
        }
        #left-top-right h4 {
          display: none;
        }
        #left-top-right h5 {
          display: none;
        }
        #left-top-right h6{
            display: initial;
            font-size: 20px;
        }
        #left-center {
          grid-column: 1/3;
          grid-row: 2/3;
          padding: 10px 20px;
        }
        #left-center h1 {
          font-size: 15vw;
          line-height: 10px;
        }
        #left-center h1:nth-child(2n) {
          text-align: right;
          padding-right: 0px;
        }
        #left-bottom {
          grid-column: 1/3;
          grid-row: 3/4;
          padding:20px;
        }
        #left-bottom p {
          font-size: 14px;
          width: 100%;
        }
        #right {
          grid-column: 1/3;
          grid-row: 4;
          padding:20px;
        }
        #right video {
          height: 100%;
          width: 100%;
        }

        #right i {
          display: none;
        }
        #arrow {
          top: 48%;
          transform: translate(-50%, -50%) rotate(90deg);
        }
        #arrow i {
          font-size: 20px;
        }
        
      }