.rewardsArticle {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }
      
      .rewardsArticle article {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        background-color: #54534f87;
        border-radius: 10px;
        padding: 20px 10px;
        box-shadow: 2px -3px 7px var(--brand-color);
      }
      .rewardsArticle article > h2,
      .rewardsArticle article > p {
        margin: 0;
      }
      .rewardsArticle article > h2 {
        font-size: 26px;
        color: var(--blue-color);
        padding-bottom: 5px;
      }
	
      form#codeForm {
        position: relative;
      }

      input.codeInput {
        background-color: transparent;
        border-color: black;
        text-transform: uppercase;
        width: 80%;
        height: 4rem;
        margin-top: 10px;
      }
      input.codeInput:focus-visible {
        background-color: #d2d1c2;
      }
      input.codeInput::placeholder {
        text-transform: capitalize;
      }

      input.codeInput + span {
        padding-right: 30px;
        display: block;
      }
      input.codeInput.error + span::after,
      input.codeInput.success + span::after,
      input.codeInput.successAPI + span::after,
      input.codeInput.errorAPI + span::after {
        position: absolute;
        padding: 10px 0;
	font-size: 18px;
      }

      input.codeInput.error + span::after,
      input.codeInput.errorAPI + span::after {
        content: "X The code Format is invalid.";
        color: red;
      }
      input.codeInput.errorAPI + span::after {
        content: "X Sorry, You're not eligible to use this code.";
      }
      input.codeInput.success + span::after,
      input.codeInput.successAPI + span::after {
        content: "✓ The Code Format is Correct";
        color: #05b405;
      }
      input.codeInput.successAPI + span::after {
        content: "✓ Code redeemed successfully!";
      }

      #sendCodeButton,#bbsButton,#cashdrawsbutton {
        border: none;
        cursor: pointer;
        border-radius: 10px;
        font-size: 1.7rem;
        padding: 0.5em 1em;
        background-color: var(--blue-color);
        color: white;
        transition-duration: 0.4s;
        margin-top: 45px;
      }
      #sendCodeButton:hover,#bbsButton:hover,#cashdrawsbutton:hover {
        transition-duration: 0.4s;
        background-color: transparent;
        outline: 1px solid var(--blue-color);
        color: var(--blue-color);
      }
      #sendCodeButton[disabled] {
        background-color: #35446482;
        pointer-events: none;
      }
      #bbsButton, #cashdrawsbutton{
        width: auto;
        margin: 0 auto;
      }

      .figureImageLink {
        width: fit-content;
        margin: 0 auto;
        overflow: hidden;
        margin-top: 16px;
        border-radius: 10px;
        transition: box-shadow 0.4s ease-in-out;
      }
      .figureImageLink img {
        transition: transform 0.4s ease-in-out;
      }
      .figureImageLink:hover {
        box-shadow: -1px -1px 8px 8px #7d7d87;
      }
      .figureImageLink:hover img {
        transform: scale(1.05);
      } 

      #wheelImage {
        cursor: pointer;
        width: 100%;
        max-width: 210px;
        height: auto;
        display: block;
      }
      /*error*/
      .bbsSpan,.cashdrawsSpan{
        display: block;
        margin: 10px 0 20px;
        font-size: 1.7rem;
      }
      .bbsSpan.error,.cashdrawsSpan.error{
        color:red;
      }
      /*success*/
      .bbsSpan.success,.cashdrawsSpan.success{
        color: green;
      }
  
      /*MEDIA QUERIES*/
      @media (min-width: 870px) and (max-width: 1024px) {
        .rewardsArticle {
          grid-template-columns: 1fr;
          row-gap: 20px;
        }
	
      }
  
      @media screen and (max-width: 768px) {
        input.codeInput {
          width: 100%;
        }
	 #sendCodeButton{
          margin-top: 65px;
        }
      }
    
      @media screen and (max-width: 620px) {
        .rewardsArticle {
          grid-template-columns: 1fr;
          row-gap: 20px;
        }
	 #sendCodeButton{
          margin-top: 45px;
        }
      }
      @media screen and (max-width: 400px) {
        #sendCodeButton {
          margin-top: 65px;
        }
        input.codeInput.error + span::after,
        input.codeInput.success + span::after,
        input.codeInput.successAPI + span::after,
        input.codeInput.errorAPI + span::after {
          padding-top: 10px;
        }
      }