@font-face {
  font-family: "Sarabun";
  src: url(../../../../../../fonts/Sarabun/Sarabun-Regular.ttf);
}
@font-face {
  font-family: "Kanit";
  src: url(../../../../../../fonts/Kanit/Kanit-Light.ttf);
}
@font-face {
  font-family: "Prompt";
  src: url(../../../../../../fonts/Prompt/Prompt-Regular.ttf);
}
@font-face {
  font-family: "PlexSans";
  src: url(../../../../../../fonts/IBM_Plex_Sans_Thai/IBMPlexSansThai-Medium.ttf);
}
@font-face {
  font-family: "NotoSansThai";
  src: url(../../../../../../fonts/NotoSansThai/NotoSansThai-Light.ttf);
}
@font-face {
  font-family: "Fraunces";
  src: url(../../../../../../fonts/Fraunces_72pt/Fraunces_72pt-SemiBold.ttf);
}
:root {
  font-family: Sarabun;
  font-weight: normal;
  font-size: 16px;
  --def-undr: white;
  --def-bgnd: #c1c59b;
  --def-text: white;
}

*, *:before, *:after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: hsl(65deg, 26%, 79%);
  overflow-x: clip;
}

h1, h2 {
  font-family: Kanit;
  font-weight: normal;
  font-size: 4rem;
  line-height: 4.5rem;
  text-align: center;
  color: hsl(147deg, 57%, 18%);
  margin: 0 0 0 0;
  padding: 0;
}

h2 {
  font-size: 2.5rem;
  line-height: 3rem;
  margin-top: 1rem;
}

figure {
  display: -ms-grid;
  display: grid;
  position: relative;
  width: 100vw;
  margin: 2rem 0rem 0rem 0rem;
      grid-template-areas: "title title" "desc map" "pic pic";
  -ms-grid-rows: auto;
  grid-template-rows: auto;
  -ms-grid-columns: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

figure h3 {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: title;
  color: rgb(255, 226, 182);
  background-color: hsla(103deg, 27%, 21%, 0.75);
  font-family: Kanit;
  font-size: clamp(2.5rem, 6vw, 3rem);
  padding: 0.25rem;
  text-align: center;
}

figure p {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  grid-area: desc;
  background-color: rgb(203, 190, 167);
  font-size: clamp(1.6rem, 5vw, 3rem);
  line-height: clamp(2.24rem, 7vw, 4.2rem);
  padding: 0.75rem;
}

figure img.map {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  grid-area: map;
  width: 100%;
}

figure img.pic {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  -ms-grid-column-span: 2;
  grid-area: pic;
  background-color: rgb(121, 144, 130);
  width: 100%;
}

figure:before {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  font-family: Kanit;
  font-size: 1.25rem;
  line-height: 2.25rem;
  width: 2.25rem;
  height: 2.25rem;
  text-align: center;
  display: block;
  content: counter(counter);
  position: absolute;
  top: 1.55rem;
  left: -3rem;
  border-radius: 12.5rem;
  background-color: hsl(26deg, 100%, 50%);
  color: white;
}

u {
  border-color: #eaebdd;
}

u.def {
  color: hsl(301deg, 100%, 50%);
}

i {
  font-style: normal;
  color: hsl(261deg, 100%, 59%);
}

u i {
  color: #7b7f4b;
  background-color: hsl(251deg, 100%, 72%);
}

u i:after {
  border-color: transparent transparent hsl(251deg, 100%, 72%) transparent;
}

#fcFromUBtn {
  color: hsl(147deg, 57%, 18%);
  background-color: #c5c8a2;
}