body{
margin:0;
font-family:Arial;
background:#000;
overflow:hidden;
}

/* container */

#container{
height:100dvh;
overflow-y:scroll;

scroll-snap-type:y mandatory;
scroll-behavior:smooth;

-webkit-overflow-scrolling:touch;
}

/* news card */

.news-card{
height:100dvh;

scroll-snap-align:start;
scroll-snap-stop:always;

display:flex;
flex-direction:column;

background:#fff;
}

/* IMAGE */

.news-image{
flex:0 0 45%;
overflow:hidden;
}

.news-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

/* CONTENT */

.news-content{
flex:1;

padding:18px;

display:flex;
flex-direction:column;
justify-content:flex-start;

overflow:hidden;
}

.news-content h2{
margin:0 0 10px 0;
font-size:22px;
}

.news-content p{
font-size:17px;
line-height:1.5;
margin:0;
}

/* BOOK BUTTON */

.news-footer{
flex:0 0 auto;

padding:14px;

background:#fff;
border-top:1px solid #ddd;
}

.book-btn{
width:100%;
padding:14px;

font-size:18px;

background:#ff3b30;
color:white;

border:none;
border-radius:6px;

cursor:pointer;
}


/* ------------------------
   FIRST NEWS SWIPE HINT
-------------------------*/

.first-news-hint{
animation: swipeHint 1.6s ease-in-out infinite;
}

@keyframes swipeHint{

0%{
transform:translateY(0);
}

25%{
transform:translateY(-30px);
}

50%{
transform:translateY(0);
}

75%{
transform:translateY(-10px);
}

100%{
transform:translateY(0);
}

}