@media (max-width: 768px) {
            
            .reward-name::before {
               font-weight: normal!important;
            }
            .timeline {
               width: auto!important;
               margin: 0 auto!important;
            }
            .timeline tbody {
               grid-template-columns: 50px auto 3rem 2rem 3rem !important;
            }
            .timeline th, .timeline td {
               display: grid!important;
            }
            
            .timeline th p, .timeline td p {
               margin: 0!important;
               
            }
            .timeline td.reward-name p {
               background-color: transparent!important;
               padding: 0!important;
               margin: 0!important;
               text-align: left!important;
            }
            .reward-name p span {
               background-color: #111b40;
               display: inline-block;
               padding: 2px 8px;
               margin: 0 40px 0 12px!important;
               border-radius: 4px;
            }

            .silver p span {
               background-color: #A2B1C0;
            }
            .gold p span {
               background-color: #BC9862;
            }
            .platinum p span {
               background-color: #B4AC9F;
            }
            .reward-name {
               grid-template-columns: 24px auto!important;
            }
         }
         @media (max-width: 470px) {
.timeline img {
   width: 40px!important;
}
            .timeline th, .timeline td {
               height: 70px!important;
            }
         .timeline tbody {
            grid-template-columns: 40px auto auto auto auto!important;
         }
            .timeline td p:not([class^="caption"]), .timeline td, .timeline th {
            font-size: .8rem!important;
         }
         .reward-name p span {
               margin: 0 20px 0 12px!important;
         }
         
            .reward-name {
               grid-template-columns: 18px auto!important;
            }
                .reward-image td::before {
                  top: 48px!important;
                  left: -20px !important;
                  width: 70px!important;
                }
         }
         @media (max-width: 390px) {

            .timeline td p:not([class^="caption"]), .timeline td, .timeline th {
            font-size: .7rem!important;
         }
         .reward-name p span {
               margin: 0 10px 0 2px!important;
         }
         
                .reward-image td::before {
                  top: 48px!important;
                  left: -20px !important;
                  width: 70px!important;
                }
         }