.table {
  position: relative;
  z-index: 0;
  cursor: grabbing;

  > tbody {
    position: relative;
    z-index: 1;
  }

stroke

  tr {
    z-index: 1;
    grid-template-columns: var(--comparison-template-columns-mobile, 17.5rem);
    grid-auto-columns: var(--comparison-columns-mobile, 17.5rem);
    grid-auto-flow: column;
    display: grid;
    background-color: linear-gradient(
      108.74deg,
      rgba(2, 3, 21, 0.77) 0%,
      rgba(43, 43, 51, 0.6) 100%
    );

    &:nth-child(even) {
      background: linear-gradient(
        108.74deg,
        rgba(35, 31, 145, 0.204) 0%,
        rgba(20, 16, 166, 0.08) 100%
      );
    }

    &:first-child {
      > td:first-child {
        border-top-left-radius: 0.8rem;
      }

      > td:last-child {
        border-top-right-radius: 0.8rem;
      }
    }

    &:last-child {
      > td:first-child {
        border-bottom-left-radius: 0.8rem;
      }

      > td:last-child {
        border-bottom-right-radius: 0.8rem;
      }
    }

    td {
      border-right: 1px solid #54535b;
      background-color: var(--comparison-body-background-color);
      box-sizing: border-box;
      padding: 0.8rem;
    }

    .casinoName {
      @include flex-direction(column);
      @include flex-align(center, flex-start);
      padding: 1.6rem;
      gap: 0.8rem;

      img {
        // border: 1px solid var(--comparison-img-border-color, #f3f2f2);
        box-sizing: border-box;
        border-radius: 0.8rem;
        // margin-right: 1.6rem;
        // border-radius: 0.6rem;
      }

      > span {
        font-weight: 700;
        font-size: 1.8rem;
        line-height: 2.8rem;
        color: #ffffff;
      }

      > a {
        font-weight: 700;
        font-size: 1.6rem;
        line-height: 2.1rem;
        color: #ffffff;
        text-decoration: underline;
      }

      // >div {
      //   height: 100%;
      //   @include flex-direction(column);
      //   @include flex-align(flex-start, space-evenly);

      //   span {
      //     font-weight: bold;
      //     font-size: 18px;
      //     line-height: 25px;
      //     font-weight: 700;
      //     color: #000000;
      //     word-break: break-word;
      //   }

      //   a {
      //     width: 100%;
      //     color: var(--comparison-button-color, white) !important;
      //     font-size: var(--comparison-button-font-size, 1.8rem) !important;
      //     font-weight: var(--comparison-button-font-weight, 700) !important;
      //   }
      // }
    }

    .bonus {
      @include flex-direction(column);
      @include flex-align(flex-start, flex-start);

      > a {
        border-radius: 0.8rem;
        background-image: repeating-linear-gradient(
            39deg,
            #ffdb20,
            #ffdb20 13px,
            transparent 13px,
            transparent 20px,
            #ffdb20 20px
          ),
          repeating-linear-gradient(
            129deg,
            #ffdb20,
            #ffdb20 13px,
            transparent 13px,
            transparent 20px,
            #ffdb20 20px
          ),
          repeating-linear-gradient(
            219deg,
            #ffdb20,
            #ffdb20 13px,
            transparent 13px,
            transparent 20px,
            #ffdb20 20px
          ),
          repeating-linear-gradient(
            309deg,
            #ffdb20,
            #ffdb20 13px,
            transparent 13px,
            transparent 20px,
            #ffdb20 20px
          );
        background-size: 1px 100%, 100% 1px, 1px 100%, 100% 1px;
        background-position: 0 0, 0 0, 100% 0, 0 100%;
        background-repeat: no-repeat;
        padding: 0.8rem;
        height: 100%;

        > span {
          font-size: 1.4rem;
          font-weight: 700;
          line-height: 1.6rem;
        }
      }
    }

    .raiting {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.8rem;
      font-size: 1.4rem !important;
      font-weight: 700;
      line-height: 2.2rem !important;

      > div {
        position: relative;
        min-width: unset;
        gap: 0;

        > span:first-child {
          margin-right: 0.4rem;
        }

        > span {
          font-size: 14px;
          font-weight: 700;
          line-height: 2.2rem;
        }

        > img:first-child {
          width: 2rem;
          height: 2rem;
          border: 1px solid #e9e9e9;
          border-radius: 100%;
        }

        > img:nth-child(2) {
          position: absolute;
          width: 1rem;
          height: 1rem;
          right: 0rem;
          bottom: 0.3rem;
        }
      }
    }

    .topFeatures {
      display: flex;
      flex-direction: column;
      align-items: center;

      > span {
        gap: 0.4rem;
        display: flex;
        align-items: center;
        font-size: 1.4rem;
        font-weight: 400;
        line-height: 2.4rem;

        > svg {
          flex: none;
        }
      }
    }

    .banking {
      text-align: center;

      > span {
        font-size: 1.4rem;
        font-size: 1.4rem;
        line-height: 2.8rem;
        color: #ffffff;
      }
    }

    .currencies {
      @include flex-align(center, flex-start);
      flex-wrap: wrap;
      row-gap: 0.4rem;
      gap: 0.8rem;
      justify-content: center;
    }

    .paymentMethods {
      padding: 1.6rem;

      > div {
        display: flex;
        gap: 0.8rem;
        justify-content: center;

        img {
          width: 4.4rem;
          height: 2.9rem;
          border-radius: 4px;
          object-fit: contain;
          background-color: white;
          border: 1px solid #ececec;
        }
      }

      > span {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.2rem;
        font-weight: 700;
        margin-top: 0.8rem;
        text-decoration: underline;
      }
    }

    .licenses {
      display: grid;
      gap: 0.8rem;
      grid-template-columns: repeat(2, 1fr);
      // padding: 1.1rem;
      // display: flex;
      // gap: 0.8rem;
      // flex-wrap: wrap;
      // justify-content: center;

      img {
        display: inline-block;
        height: 3rem;
        width: 100%;
        object-fit: contain;
        background-color: #fff;

        @include min(tablet) {
          // width: 100%;
          width: 7rem;
        }
      }

      @include min(tablet) {
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
        grid-template-columns: repeat(3, 1fr);
      }
    }

    .cta {
      padding: 1.6rem !important;

      > a {
        display: flex;
        padding: 1rem 1.6rem !important;
        font-size: 2rem;
        line-height: 2rem;
        color: #1c1a28;
        border-radius: 0.8rem;
      }
    }

    @include min(tablet) {
      grid-auto-columns: var(--comparison-columns-mobile, 28rem);
      grid-template-columns: var(--comparison-template-columns-desktop, 28rem);
    }
  }
}

.threeRow {
  grid-template-columns: var(--comparison-template-columns-mobile, 17.5rem);
  grid-auto-columns: var(--comparison-columns-mobile, 17.5rem);

  @include min(tablet) {
    grid-auto-columns: var(--comparison-columns-mobile, 32rem) !important;
    grid-template-columns: var(--comparison-template-columns-desktop, 32rem !important);
  }
}
