.dt-element__  {}

        .el-  {
          padding: 80px 0px;
          display: flex;
          align-items: center;
          flex-direction: column;
        }

        .dt-parsed-html-container__  p {
          line-height: 1.5;
          margin-bottom: 21px;
        }

        .dt-parsed-html-container__  p:last-child {
          margin-bottom: 0px;
        }

        @media (max-width: 800px) {
          .dt-parsed-html-container__  p {
            padding: 0px 15px !important;
          }
        }

        .dt-btn-engine__  {
          display: flex !important;
          flex-direction: row !important;
          flex-wrap: wrap !important;
          justify-content: center !important;
          align-items: center !important;
        }

        @media (max-width: 800px) {
          .dt-btn-engine__  {
            flex-direction: column !important;
            flex-wrap: nowrap !important;
          }
        }

        .el-  IMG {
          width: 100%;
          display: block;
        }

        .el-  .dtgh-item IMG {
          visibility: hidden;
        }

        .el-  .hc .lg-react-element {
          margin: 3rem auto;
          padding: 1rem 0 2.4rem;
          text-align: center;
          max-width: 50rem;
          display: grid;
        }

        .el-  .dtgh-item {
          width: 10rem;
          height: 10rem;
          position: relative;
          display: inline-block;
          margin: 0.4rem;
        }

        .el-  .dtgh-item::before {
          content: ; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: var(--dt_c_primary); clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%); transform: scale(1.077); transition: transform 0.3s; } .el- .dtgh-item:hover::before { transform: scale(1.154); } .el- .dtgh-item A { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-size: cover; background-position: center; clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%); } @media (min-width: 17rem) { .el- .hc .lg-react-element { grid-template-columns: repeat(10, 5rem); } .el- .dtgh-item { grid-column: span 2; margin: 0; margin-bottom: -1.4rem; } .el- .dtgh-item:nth-child(even) { grid-column: 2; } } @media (min-width: 22rem) { .el- .hc .lg-react-element { max-width: 20rem; grid-template-columns: repeat(4, 5rem); } .el- .dtgh-item:nth-child(3n + 1) { grid-column: 1; } .el- .dtgh-item:nth-child(3n + 2) { grid-column: 3; } .el- .dtgh-item:nth-child(3n + 0) { grid-column: 2; } } @media (min-width: 32rem) { .el- .hc .lg-react-element { max-width: 30rem; grid-template-columns: repeat(6, 5rem); } .el- .dtgh-item:nth-child(5n + 1) { grid-column: 1; } .el- .dtgh-item:nth-child(5n + 2) { grid-column: 3; } .el- .dtgh-item:nth-child(5n + 3) { grid-column: 5; } .el- .dtgh-item:nth-child(5n + 4) { grid-column: 2; } .el- .dtgh-item:nth-child(5n + 0) { grid-column: 4; } } @media (min-width: 42rem) { .el- .hc .lg-react-element { max-width: 40rem; grid-template-columns: repeat(8, 5rem); } .el- .dtgh-item:nth-child(7n + 1) { grid-column: 1; } .el- .dtgh-item:nth-child(7n + 2) { grid-column: 3; } .el- .dtgh-item:nth-child(7n + 3) { grid-column: 5; } .el- .dtgh-item:nth-child(7n + 4) { grid-column: 7; } .el- .dtgh-item:nth-child(7n + 5) { grid-column: 2; } .el- .dtgh-item:nth-child(7n + 6) { grid-column: 4; } .el- .dtgh-item:nth-child(7n + 0) { grid-column: 6; } } @media (min-width: 54rem) { .el- .hc .lg-react-element { max-width: 100vw; grid-template-columns: repeat(10, 5rem); } .el- .dtgh-item:nth-child(9n + 1) { grid-column: 1; } .el- .dtgh-item:nth-child(9n + 2) { grid-column: 3; } .el- .dtgh-item:nth-child(9n + 3) { grid-column: 5; } .el- .dtgh-item:nth-child(9n + 4) { grid-column: 7; } .el- .dtgh-item:nth-child(9n + 5) { grid-column: 9; } .el- .dtgh-item:nth-child(9n + 6) { grid-column: 2; } .el- .dtgh-item:nth-child(9n + 7) { grid-column: 4; } .el- .dtgh-item:nth-child(9n + 8) { grid-column: 6; } .el- .dtgh-item:nth-child(9n + 0) { grid-column: 8; } }