minnan-website/src/assets/scss/news.scss

@use "sass:list";
@use '@/assets/scss/colors.scss' as *;

.news-list {
  display: flex;
  flex-direction: column;
  gap: 24px;

  .item {
    display: flex;
    flex-direction: row;
    padding: 25px;
    border-radius: 6px;
    background-color: $box-color;

    &:hover { 
      background-color: $box-hover-color;
    }
    &:active {
      transform: scale(0.95);
    }

    img {
      width: 320px;
      height: 180px;
      margin-right: 25px;
    }

   
  }
}


@media (max-width: 768px) {
  .news-list {
    .item {
      display: flex;
      flex-direction: row;
      padding: 25px;
      border-radius: 6px;
      background-color: $box-color;

      img {
        width: 200px;
        height: 140px;
        margin-right: 25px;
      }
    }
  }
}
@media (max-width: 540px) {
  .news-list {
    .item {
      flex-direction: column;

      img {
        width: 100%;
        height: 180px;
        
        margin-right: 0;
        margin-bottom: 16px;
      }
    }
  }
}