/*BEYOND level overview*/

#loyl-landingpage--level-overview {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: calc(var(--nui-space-1, 0.375rem) * 21);
}

#loyl-landingpage--level-overview-container {
  display: flex;
  column-gap: var(--nui-space-5, 5rem);
  row-gap: var(--nui-space-5, 5rem);
  place-self: center;
  margin-top: var(--nui-space-7, 7rem);
}

.loyl-landingpage--level-overview--card {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 140px;
  padding: var(--nui-space-7, 7rem);
  border-radius: 8px;
  overflow: hidden;
  /*Fix Safari transition bug*/
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  user-select: none;
    &.bronze-gradient {
        background: linear-gradient(111.11deg, #936744 0%, #AE5F43 100%);
    }
    &.silver-gradient {
        background: linear-gradient(111.11deg, #7B6C6B 0%, #816A69 100%);
    }
    &.gold-gradient {
        background: linear-gradient(111.11deg, #B46000 0%, #C15628 100%);
    }
    &.platin-gradient {
        background: linear-gradient(111.11deg, #625058 0%, #8D5157 100%);
    }
}

.loyl-landingpage--level-overview--card img {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease-in-out;
}

.loyl-landingpage--level-overview--card:hover img {
  transform: scale(1.3);
}

.loyl-landingpage--level-overview--card img:not(:hover) {
  transition: all .8s ease-out;
}

#loyl-landingpage--level-overview-container .loyl-landingpage--text-block p {
  color: var(--nui-snow, rgba(255,255,255,1));
}

@media (max-width: 959px) {
  #loyl-landingpage--level-overview-container {
    flex-direction: column;
    row-gap: var(--nui-space-2, 2rem);
    margin-top: var(--nui-space-5, 5rem);
    width: 100%;
  }

  .loyl-landingpage--level-overview--card{
    height: 85px;
  }

  #loyl-landingpage--level-overview {
    margin-bottom: var(--nui-space-15, 15rem);
  }
}

@media (max-width: 559px) {
  .loyl-landingpage--level-overview--card {
    padding: 0;
  }

  #loyl-landingpage--level-overview h2{
    max-width: 340px;
  }
}