.table {
  position: relative;
  z-index: 0;
  cursor: grabbing;
  tr {
    grid-template-columns: var(--comparison-template-columns-mobile, 9.6rem 27rem);
    grid-auto-columns: var(--comparison-columns-mobile, 27rem);
    grid-auto-flow: column;
    display: grid;

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

    &:last-child {
      th {
        border-bottom-left-radius: 0.8rem;
        border-bottom: 1px solid var(--comparison-header-border-color);
      }
    }

    th {
      @include flex-align(center, center);
      padding: 2rem 2rem;
      background-color: var(--comparison-header-background-color, #f9f6f3);
      border: 1px solid var(--comparison-header-border-color);
      border-bottom: none;
      box-sizing: border-box;
      color: var(--comparison-header-text-color, #171f49);
      text-transform: var(--comparison-header-text-transform);
      font-size: var(--comparison-th-font-size, 1.4rem);
      font-weight: var(--comparison-th-font-weight, 600);
      line-height: var(--comparison-th-line-height, 2.1rem);
      z-index: 1;

      @include min(laptop) {
        position: sticky;
        left: 0;
      }
    }
    td {
      border: 1px solid var(--comparison-body-border-color);
      background-color: var(--comparison-body-background-color);
      box-sizing: border-box;
      padding: 1.6rem;
    }
    .casinoName {
      @include flex-direction(row);
      @include flex-align(center, flex-start);
      padding: 1.6rem;
      img {
        border: 1px solid var(--comparison-img-border-color, #f3f2f2);
        box-sizing: border-box;
        margin-right: 1.6rem;
        border-radius: 0.6rem;
      }
      > 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);
      span:first-child {
        font-size: 1.6rem;
        line-height: 22px;
        font-weight: bold;
        color: var(--comparison-first-bonus-color, #17d670);
      }
      span:nth-child(2) {
        font-weight: bold;
        font-size: 1.4rem;
        font-weight: 700;
        line-height: 21px;
        color: var(--comparison-second-bonus-color, #0f0c28);
      }
    }

    .raiting {
      @include flex-align(center, space-between);

      > div {
        justify-content: left;
        border: none;
      }

      > div > div > span {
        position: inherit;
      }

      a {
        text-align: right;
        font-size: 1.6rem;
        line-height: 24px;
        font-weight: 700;
        color: var(--comparison-text-link-color, #4790fe);
      }
    }
    .topFeatures {
      @include flex-direction(column);
      @include flex-align(flex-start, center);
      span {
        @include flex-direction(row);
        @include flex-align(center, center);
        margin-bottom: 0.4rem;
        margin-top: 0.4rem;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;

        svg {
          color: var(--comparison-top-features-icon-color, #ff893f);
          margin-right: 0.25rem;
          height: 14px;
        }
      }
    }
    .banking {
      @include flex-direction(column);
      @include flex-align(center, center);
      p {
        width: 100%;
        @include flex-align(center, space-between);
        font-weight: 600;
        font-size: 14px;
        line-height: 36px;

        color: #000000;
        span {
          font-weight: 700;
          font-size: var(--comparison-banking-values, 16px);
        }
      }
    }
    .currencies {
      padding: 1.6rem 1rem;
      @include flex-align(center, flex-start);
      flex-wrap: wrap;
      row-gap: 0.4rem;
      span {
        text-align: center;
        margin-left: 0.4rem;
        background-color: var(--comparison-currencies-background-color, #f3f2f2);
        color: var(--comparison-currencies-text-color, #17182f);
        border-radius: 2px;
        padding: 0.3rem 0.8em;
        font-weight: bold;
        font-size: 12px;
        line-height: 18px;
        width: 4.2rem;
        height: 2.4rem;
        display: inline-block;
      }
    }
    .paymentMethods {
      padding: 1.3rem 1.6rem;
      > div {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-column-gap: 1rem;
        grid-row-gap: 0.8rem;
        span,
        a {
          @include flex-direction(row);
          @include flex-align(center, center);
          font-weight: bold;
          font-size: 14px;
          line-height: 18px;
          object-fit: contain;
          color: black;
          background-color: white;
          width: 100%;
        }
        img {
          width: 7.2rem;
          height: 3.2rem;
          border-radius: 4px;
          object-fit: contain;
          background-color: white;
        }
      }
    }
    .licenses {
      padding: 1.1rem;
      img {
        display: inline-block;
        height: 3.2rem;
        width: 7.2rem;
        object-fit: contain;
        background-color: #fff;
        margin-right: 1rem;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
      }
    }

    @include min(tablet) {
      grid-template-columns: var(--comparison-template-columns-desktop, 15.2rem 27rem);
    }
  }
}
