@import url("https://fonts.googleapis.com/css?family=Kanit");

body {
  padding: 0;
  margin: 0;
}

.mainContainer {
  display: flex;
  width: 90%;
  margin: 2% auto;
  /* border: 1px solid #ccc; */
}

.mainContainer ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex: 1;
  /* border: 1px solid red; */
  flex-direction: column;
}

.mainContainer ul li:nth-child(1) {
  /*flex: 1;*/
  /*display: flex;*/
}

.mainContainer ul li:nth-child(1) img {
  width: 50%;
  /*height: 100%;*/
  display: flex;
  margin: 0 auto;
  /* flex: 1; */
}

.mainContainer ul li:nth-child(2) {
  display: flex;
  margin: 15px 0 0 0;
  align-self: center;
}

.mainContainer ul li:nth-child(2) span {
  cursor: pointer;
  border: 10px solid gold;
  /* border: 10px solid #1e0f07; */
  flex-basis: 250px;
  padding: 10px 20px 10px 20px;
  font-size: 26px;
  background-color: #552406;
  color: gold;
  font-family: "Kanit", sans-serif;
  transition: all 0.3s linear;
  -webkit-transition: all 0.3s linear;
  -moz-transition: all 0.3s linear;
  -ms-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
}

.mainContainer ul li:nth-child(2) span:hover {
  background-color: gold;
  color: #db1921;
  border: 10px solid #db1921;
}

@media only screen and (max-width: 800px) {
  .mainContainer ul li:nth-child(1) img {
    width: 60%;
    height: auto;
  }
}

@media only screen and (max-width: 400px) {
  .mainContainer ul li:nth-child(2) span {
    font-size: 14px;
    height: auto;
  }

  .mainContainer ul li:nth-child(1) img {
    width: 90%;
    height: auto;
    flex: 1;
  }
}