@use '../utils' as *;

/*----------------------------------------*/
/* Ranking badge card 
/*----------------------------------------*/
.rock-ranking-badge-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 20px;
  @media #{$md,$sm} {
    grid-template-columns: repeat(2, 1fr);
  }
  @media #{$xs} {
    grid-template-columns: 1fr;
  }
}
.rock-ranking-badge-item {
  position: relative;
  background: rgba($white, $alpha: 0.1);
  backdrop-filter: blur(4.69592px);
  @include border-radius(22px);
  padding: 50px 50px;
  text-align: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom;
  display: flex;
  align-items: end;
  justify-content: center;
  @media #{$x3l,$xxl,$lg} {
    padding: 30px 20px;
  }
  &:before {
    position: absolute;
    content: "";
    inset: 0;
    @include border-radius(20px);
    padding: 2px;
    background: linear-gradient(139.9deg,rgba(255, 255, 255, 0) 0%,rgba(255, 255, 255, 0.4) 100%);
    -webkit-mask: linear-gradient(var(--td-white) 0 0) content-box, linear-gradient(var(--td-white) 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: -1;
  }
  &:nth-child(1) {
    .thumb {
      filter: drop-shadow(0px 4px 34px rgba(255, 255, 255, 0.25));
    }
  }
  &:nth-child(2) {
    .thumb {
      filter: drop-shadow(0px 4px 34px rgba(255, 194, 99, 0.25));
    }
  }
  &:nth-child(3) {
    .thumb {
      filter: drop-shadow(0px 4px 34px rgba(98, 42, 255, 0.25));
      ;
    }
  }
  &:nth-child(4) {
    .thumb {
      filter: drop-shadow(0px 4px 34px rgba(98, 42, 255, 0.25));
      ;
    }
  }
  .thumb {
    margin-bottom: 28px;
  }
  .content {
    .title {
      font-size: 28px;
      margin-bottom: 25px;
      color: var(--td-white);
      @media #{$x3l,$xl} {
        font-size: 24px;
      }
      @media #{$xxl,$lg,$sm,$xs} {
        font-size: 20px;
      }
    }
    .description {
      background: rgba($white, $alpha: 0.08);
      mix-blend-mode: normal;
      border: 1.17398px solid rgba($white, $alpha: 0.08);
      @include border-radius(36px);
      font-size: 12px;
      font-weight: 700;
      padding: 6px 15px;
    }
  }
}