.page-redemption {
  min-height: 500px;
}
.page-redemption {
  .container {
    height: auto;
  }
  .game-list {
    display: flex !important;
    margin: -15px;
    flex-wrap: wrap;

    .each {
      width: calc(40% - 95px);
      margin: 9px;
      display: flex;

      .cover {
        width: 48%;
        background-color: #fff;
        display: flex;
        align-items: center;
        img {
          width: 100%;
        }
      }

      .content {
        padding-top: 0px !important;
        height: 100% !important;
        width: 60%;
        display: flex;
        justify-content: space-around !important;
        flex-direction: column;
        font-weight: bold;
        text-transform: uppercase;
        background-color: black;

        .title {
          padding: 0 10px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          gap: 35px;
          color: gold;

          .points {
            font-size: 10px;
          }
        }

        .divider {
          width: 90%;
          height: 1px;
          background: gold;
          margin:0 auto 5px auto;
        }

        .product {
          margin-left: 10px;
          margin-right: 4px;

          .product-title {
           
            font-size: 12px;
            color: white;
          }

          .details {
            font-size: 8px;
            color: white;
          }
        }

        .button {
          width: 100%;
          display: flex;
          align-items: center;
          color: white;
          padding-bottom: 10px;
          justify-content: center;

          .disable {
            padding: 5px 10px;
            border-radius: 10px;
            color: white;
            cursor: pointer;
            background-color: gray;
          }

          .enable {
            padding: 5px 10px;
            border-radius: 10px;
            color: white;
            background-color: lightgreen;
            cursor: pointer;
          }
        }
      }
    }
  }

  .container {
    h1 {
      font-size: 36px !important;
      padding: 15px 15px 8px !important;
      color: white;
    }

    .wrapper {
      @media (max-width: 991px) {
        max-width: none;
      }
    }
  }
}

@media (max-width: 1200px) {
  .page-redemption {
    .game-list {
      margin: -10px;

      .each {
        width: 100%;
        margin: 10px;
        flex-direction: column;

        .cover,
        .content {
          width: 100%;
        }

        .content {
          padding: 15px !important;

          .title {
            font-size: 20px;

            .points {
              font-size: 15px;
            }
          }

          .divider {
            margin-top: 10px;
            margin-bottom: 20px;
          }

          .product {
            margin: 10px 0;
            .product-title {
              text-align: center;
              font-size: 20px;
              margin-bottom: 10px;
            }

            .details {
              font-size: 18px;
              text-align: center;
            }
          }

          .button {
            margin-left: 0;
            justify-content: center;
            .disable {
              padding: 5px 15px;
            }

            .enable {
              padding: 5px 15px;
            }
          }
        }
      }
    }

    .container h1 {
      font-size: 26px !important;
      padding: 10px 10px 5px !important;
    }
  }
}