.hot-button {width: 99%;height: auto;margin: 0 auto 40px;text-align: center}
.hot-box{width: 49%;height: auto;display: inline-block;vertical-align: top;}
button {
  padding: 0;
  border: none;
  font: inherit;
  color: inherit;
  background-color: transparent;
  cursor: pointer;
 max-width: 680px;
}

button:focus {
  outline: 0;
}

button {
  padding: 10px 20px;
 /* outline: 1px dotted black;*/
 text-align: center;
}
button img {height: 60px;display: inline-block;vertical-align: middle;margin-right: 7px;width: 25%}
button p {display: inline-block;vertical-align: middle;width: 69%;margin: 0}

.button-five{
  background-color: #ff8c00;
  border-radius: 15px;
background: linear-gradient(90deg, rgba(128,70,0,1) 0%, rgba(255,140,0,1) 52%, rgba(255,140,0,1) 100%);
font: 26px 'Kanit', sans-serif;
color: white;
}

@media only screen and (min-width: 641px) and (max-width: 1000px) {
  .hot-button {width: 99%;margin: 0 auto 20px;}
  .hot-box{width: 90%;margin: 10px auto 20px }
}

@media only screen and (min-width: 481px) and (max-width: 640px) {
  .hot-button {width: 99%;margin: 0 auto 20px;}
  .hot-box{width: 90%;margin: 10px auto 20px }
  .button-five {font: 24px 'Kanit', sans-serif;}
  button {padding: 10px;}
  button img {height: 50px;width: auto;}
  button p {width: 90%}
}

@media only screen and (min-width: 320px) and (max-width: 480px) {
  .hot-button {width: 99%;margin: 0 auto 20px;}
  .hot-box{width: 90%;margin: 10px auto 20px }
  .button-five {font: 22px 'Kanit', sans-serif;}
  button {padding: 10px;}
  button img {height: 40px;width: auto;}
  button p {width: 90%}
}