/* ========================================
News List
======================================== */

.news-list{

  display:flex;

  flex-direction:column;

  gap:48px;

}

.news-item{

  display:flex;

  gap:32px;

  align-items:flex-start;

}

.news-thumb{

  width:320px;

  height:220px;

  flex-shrink:0;

  overflow:hidden;

  border-radius:16px;

}

.news-thumb img{

  width:100%;

  height:100%;

  object-fit:cover;

  display:block;

}

.news-body{

  flex:1;

}

.news-date{

  color:#999;

  margin-bottom:8px;

}

.news-title{

  font-size:24px;

  font-weight:700;

  margin-bottom:16px;

}

.news-text{

  line-height:1.9;

}

.news-more-btn{

  margin-left:12px;

  border:none;

  background:none;

  color:var(--main-color);

  font-weight:600;

  cursor:pointer;

}

.news-more-btn:hover{

  opacity:.7;

}

/* ========================================
News Modal
======================================== */

.news-modal{

  position:fixed;

  inset:0;

  z-index:9999;

  display:none;

}

.news-modal.show{

  display:block;

}

.news-modal-overlay{

  position:absolute;

  inset:0;

  background:
    rgba(0,0,0,.6);

}

.news-modal-content{

  position:relative;

  max-width:900px;

  max-height:90vh;

  overflow:auto;

  margin:5vh auto;

  background:#fff;

  border-radius:24px;

  padding:40px;

  z-index:2;

}

.news-modal-close{

  position:absolute;

  top:20px;

  right:20px;

  border:none;

  background:none;

  font-size:32px;

  cursor:pointer;

}

.news-modal-image{

  width:100%;

  max-height:500px;

  object-fit:cover;

  border-radius:16px;

  margin-bottom:24px;

}

.news-modal-date{

  color:#999;

  margin-bottom:12px;

}

.news-modal-title{

  margin-bottom:24px;

}

.news-modal-text{

  line-height:2;

}

/* ========================================
Mobile
======================================== */

@media(max-width:768px){

  .news-item{

    flex-direction:column;

    gap:20px;

  }

  .news-thumb{

    width:100%;

    height:220px;

  }

  .news-title{

    font-size:20px;

  }

  .news-modal-content{

    margin:20px;

    padding:24px;

  }

}