*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}
.maincontent{
    background-color: #333;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(360px,1fr));
}
.main{
    background-color: #fff;
    width: 360px;
    margin: 2rem auto;
    height: 560px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2); /*x3px y3px ความฟุ้ง10px rgbaคือสีเงา*/
    border-radius: 50px; /*กำหนดขอบเป็นเส้นโค้ง*/
    /* overflow: hidden;   .main กำหนดขอบเป็นเส้นโค้งทั้งหมด คือ การตัดส่วนเกินออก */
    position: relative; 
    /*.ใช้กำหนดเพื่ออ้างอิงถึงdiv.tag position: relative;กับ position:adlolute;.ให้ถึงกัน
    เมื่อ save refresh ข้อความ .tag จะหายไปเนื่องจากกล่อง div main ทับอยู่
    ใช้คำสั่ง layer ให้อยู่หน้าสุด คือ z-index: 999; เพื่อดึงข้อความมาอยู่ข้างหน้าสุด*/
}
.tag{
    position: absolute;
    /*.ใช้กำหนดเพื่ออ้างอิงถึงdiv.tag position: relative;กับ position:adlolute;.ให้ถึงกัน
    เมื่อ save refresh ข้อความ .tag จะหายไปเนื่องจากกล่อง div main ทับอยู่
    ใช้คำสั่ง layer ให้อยู่หน้าสุด คือ z-index: 999; เพื่อดึงข้อความมาอยู่ข้างหน้าสุด*/
    z-index: 999;
    top: -15px;  /*ปรับกล่อง div.tag บนล่าง แนวแกน Y*/
    left: 50%; /*เลื่อนกล่อง div.tag จากด้านซ้าย มาด้านขวา แนวแกน X 50% (มุมซ้ายกล่องอยู่กึ่งกลาง)*/
    transform: translateX(-50%); /*ปรับกล่องให้อยู่กึ่งกลาง.div*/
    background-color: tomato;
    padding: 0.5rem 2rem;
    border-radius: 5px;
    color: #fff;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}
.img{
    background-color: brown;
    height: 250px;
    overflow: hidden;  /* ตัดรูปภาพส่วนที่เกิน.img ออก */
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    position: relative;
}
.img img{
    width: 100%;
    height: 100%;
}
.content{
    text-align: center;/*กำหนดให้ตัวอักษรอยู่กึ่งกลาง*/
    border-bottom: 2px solid #5e5e5e;/*เส้นคั่นด้านล่าง.content*/
    height: 250px;/*ความสูง.content*/
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;/*ไม่ต้องสร้างdiv.center ต่อจาก .content เพิ่ม ใช้คำสั่ง flex-derection จัดกึ่งกลางแนวตั้งได้*/
    padding: 1rem;
}
.content h3{
    color: #9f9f9f;
    border-bottom: 1px solid #e5e5e5;
}
.content h1{
    margin: 1rem 0;
}
.content p{
    color: #9f9f9f;
}
.footer{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    border-radius: 50%;
}