cyb/src/containers/temple/pages/play/styles.scss

@mixin linear-gradient-green($route) {
  background: linear-gradient(
    $route,
    rgba(0, 0, 0, 0) 0%,
    rgba(54, 214, 174, 1) 100%
  );
}

@mixin linear-gradient-blue($route) {
  background: linear-gradient(
    $route,
    rgba(0, 0, 0, 0) 0%,
    rgba(31, 203, 255, 1) 100%
  );
}

@mixin styleGradientPseudoEl {
  content: '';
  position: absolute;
  height: 100%;
  width: 400px;
  top: 0;
  bottom: 0;
}

.gatadienContainer {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0px 20px;
  position: relative;
  margin-bottom: 30px;

  &::after {
    opacity: 11%;
    @include styleGradientPseudoEl;
    @include linear-gradient-green(90deg);
    right: 0;
  }
}

.containerTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 30px;
  padding: 15px 0;
  position: relative;
  color: #6dff9f;
  text-shadow: 0px 0px 10px #1fcbff;

  &::before {
    opacity: 11%;
    @include styleGradientPseudoEl;
    // @include linear-gradient-green(-90deg);
    @include linear-gradient-blue(-90deg);

    left: -20px;
  }
}

.containerPlayContent {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  padding: 10px;
  gap: 20px;

  @media (max-width: 768px) {
    padding: 10px;
  }
}

.containerPlayContentContainerText {
  display: block;
  transform: translateX(0px);
  transition: 0.4s;
}

.containerItemPlayContent {
  display: grid;
  grid-template-columns: 75px 1fr;
  gap: 10px;
  height: 95px;

  @media (max-width: 768px) {
    grid-template-columns: 90px 1fr;
  }

  &Img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    transition: 0.2s;

    @media (max-width: 768px) {
      width: 90px;
      height: 90px;
    }
  }

  &Title {
    font-size: 16px;
    color: #36d6ae;
    margin: 8px 0;

    @media (max-width: 768px) {
      font-size: 20px;
    }
  }

  &Dsc {
    font-size: 14px;
    color: #777777;
    @media (max-width: 768px) {
      font-size: 18px;
    }
  }

  &:hover {
    cursor: pointer;

    .containerItemPlayContentImg {
      width: 75px;
      height: 75px;
      object-fit: contain;
      @media (max-width: 768px) {
        width: 95px;
        height: 95px;
      }
    }

    .containerPlayContentContainerText {
      transform: translateX(5px);
    }
  }
}

.containteImgItemPlayContent {
  display: flex;
  justify-content: center;
}