* ::after,::before{
    box-sizing: border-box;
}
.container{
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x)* .5);
    padding-left: calc(var(--bs-gutter-x)* .5);
    margin-right: auto;
    margin-left: auto;
}
main{
    padding: 3rem 0;
    /* background: rgb(46, 46, 80); */
    background: url(https://www.printwallpaper.net/wp-content/uploads/2022/02/LBG-005.jpg);
    
}
main>h1{
    color: rgb(255, 255, 255);
    text-align: center;
    margin-bottom: 3rem;
    font-family: 'Prompt', sans-serif;
}
main .card{
    --bs-gutter-x: -1rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1* var(--bs-gutter-y));
    margin-right: calc(-.5* var(--bs-gutter-x));
    margin-left: calc(-.5* var(--bs-gutter-x));
}
main .p{
    width: 500px;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
    border-radius: 40px;
    overflow: hidden;
    background: white;
    font-family: 'Prompt', sans-serif;
    margin: 1rem auto;
}
.img{
    width: 100%;
    /* background: brown; */
    border-radius: 20px;
    overflow: hidden;
}
.img img{
    width: 100%;
}
.card .p .content{ 
    text-align: center;
    /*border-bottom: 2px solid #e5e5e5;*/
    height: 200px;
    padding-top: 1rem;
    margin: 0rem 1rem ;
}
.card .p .content h3{
   color: #9f9f9f;
   font-size: 15px;
}
.card .p .content  i{
    color: #fd4646;
    padding: 0 10px;
}
.card .p .content h1{
    margin: 1.5rem 0;
}
.card .p .content p{
    color: #9f9f9f;
    @media screen and (max-width: 299px) {
        display: none;
    }
}
main .footer{
    text-align: center;
}
main .footer a button{
    font-size: 16px;
    /* padding: 10px 100px; */
    width: 70%;
    padding: .75rem 0;
    border-radius: 20px;
    color: white;
    font-size: 20px;
    background: black;
    border: 0px;
    cursor: pointer;
    margin-bottom: 1rem;
    overflow: hidden;
}
main .footer a button:hover{
    transition: transform 0.5s;
    transform: translate(0, -6px);
    box-shadow: 10px -10px 25px 0px rgba(143, 64, 248, 0.5), -10px 10px 25px 0px rgba(39, 200, 255, 0.5);
    animation: mmm 1.7s infinite ease-in-out;
}
main .footer a button:hover::after{
    transform: rotate(150deg);
}
main .footer a button::after{
    content: "";
    width: 99%;
    height: 400px;
    position: absolute;
    top: -150px;
    left: 1px;
    background-color: #c625d0;
    background-image: linear-gradient(255deg, #27d86c 0%,#26caf8 50%, #c625d0 100%);
    z-index: -1;
    transition: all 0.5s ease;
}
@keyframes mmm {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px); /* ลอยขึ้น 10px */
    }
    100% {
      transform: translateY(0); /* กลับมาตำแหน่งเดิม */
    }
  }
/*.pictures{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 2rem;
}
.pictures figure img{
    width: 100%;
    height: 300px;
}*/