/* Three columns side by side – แบ่ง Column <div class=’column’>  เป็น 3ส่วนเท่าๆกัน */
.column {
    float: left;
    width: 33.3%;
    margin-bottom: 16px;
    padding: 0 8px;
}

/* Display the columns below each other instead of side by side on small screens (@media screen) โดยกำหนดให้ความกว้างสูงสุดไว้ที่ 650px  */
@media screen and (max-width: 650px) {   /*ถ้าต่ำกว่า 650px ลงมาให้ใช้ตามนี้*/
  .column {    /* ซึ่งให้มีผลกับ class=’column’ */
    width: 100%;
    display: block;
  }
}
@media screen and (min-width: 1024px) {   /*เกินจาก 1024px ไปให้ใช้ตามนี้*/
  .column {    /* ซึ่งให้มีผลกับ class=’column’ */
    width: 16.6%;
    display: block;
  }
}
/* Add some shadows to create a card effect */
.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 15px;   /*มุมของ Card โค้งมนหน่อย*/
}

/* Some left and right padding inside the container */
.card-body {
    padding: 0 2px;
}

/* Clear floats */
.card-body::after, .row::after {
    content: "";
    clear: both;
    display: table;
}

.card-title {
    color: grey;
    font-size:1.5vw !important;  /*ปรับขนาด Font ไปตามความกว้างของ div*/
    overflow: hidden;   /*ส่วนที่เกินจะซ่อนเอาไว้*/
    display: -webkit-box;
    -webkit-line-clamp: 2;      /*ให้แสดงข้อความได้ 2บรรทัด*/
    -webkit-box-orient: vertical;
    height: 2.4em;       /* height is 2x line-height, so three lines will display */
}
.card-text {
    font-size:1vw !important;  /*ปรับขนาด Font ไปตามความกว้างของ div*/
    overflow: hidden;   /*ส่วนที่เกินจะซ่อนเอาไว้*/
    display: -webkit-box;
    -webkit-line-clamp: 3;      /*ให้แสดงข้อความได้ 3บรรท*/
    -webkit-box-orient: vertical;
    height: 5em;       /* height is 3x line-height, so three lines will display */
}
.card-text-4 {
    font-size:1vw !important;  /*ปรับขนาด Font ไปตามความกว้างของ div*/
    overflow: hidden;   /*ส่วนที่เกินจะซ่อนเอาไว้*/
    display: -webkit-box;
    -webkit-line-clamp: 4;      /*ให้แสดงข้อความได้ 3บรรท*/
    -webkit-box-orient: vertical;
    height: 6em;       /* height is 3x line-height (1.5), so three lines will display */
}
.card-img, .card-img-top {
    border-top-left-radius: calc(0.25rem - 1px);
    border-top-right-radius: calc(0.25rem - 1px);
}

.card-img, .card-img-bottom, .card-img-top {
    flex-shrink: 0;
    width:300px;
    height: 200px;    /*จะปรับให้ความสูงเป็นอัตราส่วนเดียวกันกับความกว้างเสมอ*/
    object-fit: cover;   /*จะปรับให้เต็มพื้นที่เลยตาม aspect ratio ซึ่งถ้าด้านใด (H,W) มีขนาดไม่ได้ก็จะซ่อนส่วนนั้นไป */
}
.card img {
    vertical-align: top;
    border-style: none;
}
.card button {
  font-size:1.25vw;
  border:1px solid;
  padding:0px;
}