/* section1 */
.wrapper {
  display: grid;
  grid-template-columns: 2fr 10fr;
  column-gap: 25px;
}

.grid-container {
  display: grid;
  grid-template-columns: 3fr 3fr 3fr;
}

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

/* section2 */
.wrapper2 {
  display: grid;
  grid-template-columns: 2fr 10fr;
  column-gap: 25px;
}

.grid-container2 {
  display: grid;
  grid-template-columns: 3fr 3fr;
}
.grid-item {

}
.itemA {
  grid-column: 1 / span 2;
  grid-row: 1;
}
.itemD {
  grid-column: 1 / span 2;
  grid-row: 3;
}
.itemE {
  grid-column: 1 / span 2;
  grid-row: 4;
}

.itemB {
	background: #83d0c3;
	padding:  90px 50px 0 50px;
	margin: 90px 0;
	border-right: 1px solid #ffffff;
	position: relative;
	min-height: 800px;
}
.itemC {
	background: #83d0c3;
	padding:  90px 0 0 50px;
	margin: 90px 0;
	position: relative;
	min-height: 950px;
}
#lang_th h1 {
  width: 535px;
}

@media only screen and (min-device-width: 0px) and (max-device-width: 735px) and (min-width: 0) and (max-width: 1280px) {
  .wrapper {
    grid-template-columns: 12fr;
  }  
  .grid-container {
    grid-template-columns: 6fr 6fr;
  }

  .wrapper2 {
    grid-template-columns: 12fr;
  }
  .grid-container2 {
    grid-template-columns: 6fr;
  }
  .itemA {
    grid-row: 1;
  }
  .itemB {
    grid-row: 2;
  }
  .itemC {
    grid-row: 3;
  }
  .itemD {
    grid-row: 4;
  }
  .itemE {
    grid-row: 5;
  }
  .itemB {
    padding: 50px 15px 0 15px;
    margin: 50px 0 0 0;
    border-right: 0;
  }
  .itemC {
    padding: 50px 15px 0 15px;
    margin: 1px 0 50px 0;
    min-height: 900px;
  }

}

/* ipad - portrail*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
  .wrapper {
    grid-template-columns: 12fr;
  }  
  .wrapper2 {
    grid-template-columns: 12fr;
  }
  .grid-container2 {
    grid-template-columns: 6fr;
  }
  .itemA {
    grid-row: 1;
  }
  .itemB {
    grid-row: 2;
  }
  .itemC {
    grid-row: 3;
  }
  .itemD {
    grid-row: 4;
  }
  .itemE {
    grid-row: 5;
  }
  .itemB {
    padding: 50px 15px 0 15px;
    margin: 50px 0 0 0;
    border-right: 0;
  }
  .itemC {
    padding: 50px 15px 0 15px;
    margin: 1px 0 50px 0;
    min-height: 900px;
  }
}

/* ipad - landscape */
@media only screen and (min-device-width : 1024px) and (max-device-width : 1080px) and (orientation : landscape) {
  .itemB {
    min-height: 1000px;
  }
}