body.rai3 {
  background-image:     url("../pics/bgrh.jpg");
  background-repeat:    no-repeat;
  background-position:  center;
  background-size:      cover; 
  width:                100vw;
  height:               100vh;
  display:              flex; 
  justify-content:      center; 
  font-family:          'Bai Jamjuree', sans-serif;
}

ul.group {
  position:          relative;
  float:             left;
  list-style-type: 	 none;
  width:             100%;
  padding:           0px;
  margin:            0px;
  text-align:        center;
}

li.group, li.group2 {
  position:          relative;
  float:             left;
  list-style-type: 	 none;
  background:        rgba(255,255,255,0.7);
  width:             calc(100% / 2 - 30px);
  aspect-ratio:      1 / 1.15;
  border-radius:     25px;
  margin:            10px;
}

li.group2 {
  background:        rgba(255,180,180,0.0);
}


ul.icon {
  position:          relative;
  float:             left;
  list-style-type: 	 none;
  width:             calc(100% - 0px);
  margin:            0px;
  padding:           0px;
}
li.icon {
  position:          relative;
  float:             left;
  list-style-type: 	 none;
  padding:           10px;
}
li.kat {
  position:          relative;
  float:             left;
  list-style-type: 	 none;
  width:             calc(100% - 20px);
  padding:           5px 10px 0px 10px;
  font-size:         30px;
  color:             white;
  -webkit-text-stroke: 1px #F8F8F8;
	text-shadow: 0px 1px 5px #23430C;}

img.icon {
  position:          relative;
  float:             left;
  width:             200px;
}

@media(min-width: 1200px) {
  body.rai3 {
    background-image: url("../pics/bgr.jpg");
  }

  ul.group {
    display:           flex;
    justify-content:   center;
    height:            fit-content;
  }
  
  li.group {
    width: 200px;
    border-radius: 25px;
    margin: 10px;
  }
  img.icon {
    position:          relative;
    float:             left;
    width:             70px;
  }
  li.kat {
    position:          relative;
    float:             left;
    list-style-type: 	 none;
    width:             calc(100% - 20px);
    padding:           5px 10px 0px 10px;
    font-size:         16px;
    color:             white;
    -webkit-text-stroke: 1px #F8F8F8;
    text-shadow: 0px 1px 5px #23430C;
  }
  
  li.group2 {
    display:             none;
  }
}