<template>
  <div class="news-container">
    <div class="news-header">
      <img
        src="@/assets/img/about/gameWeb_aboutP4_title.png"
        alt="Logo"
        class="news-logo"
      />
    </div>

    <div class="news-content">
      <div class="news-item left">
        <div class="news-left-img">
          <img src="@/assets/img/about/gameWeb_aboutP4_news1.png" />
        </div>
        <div class="news-footer">
          <a href="https://twitter.com/_CounterFire" target="_blank">More news follow our twitter>></a>
        </div>
      </div>
      <div class="news-item right">
        <div class="news-right-img-top">
          <img  class="gameWeb_aboutP4_deco" src="@/assets/img/about/gameWeb_aboutP4_deco.png" />
         
          <img class="gameWeb_aboutP4_news2"   src="@/assets/img/about/gameWeb_aboutP4_news2.png" />
        </div>
        <img class="gameWeb_aboutP4_news3" src="@/assets/img/about/gameWeb_aboutP4_news3.png" />
      </div>
    </div>
  </div>
</template>

<script setup>
// Your Vue3 logic here.
</script>

<style lang="scss" scoped>
.news-container {
  width: 100%;
  height: 100%;
  padding-top: 84px;
  padding-left: 215px;
  padding-right: 221px;
  background-image: url("@/assets/img/about/gameWeb_aboutP4_bg1.png");
  background-repeat: no-repeat;
  background-size: cover;

  .news-header {
    display: flex;
    align-items: center;
    margin-top: 11px;
    margin-bottom: 20px;

    .news-logo {
      width: 569px; // Adjust as needed
      height: 94px; // Adjust as needed
      // margin-right: 10px;
    }
  }

  .news-content {
    display: flex;
    gap: 45px;

    .news-item {
      // flex: 1;

      &.left {
        margin-left: 75px;
        margin-top: 50px;
        .news-left-img {
          width: 636px;
          height: 421px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }

      &.right {
        // Additional styles specific to the right news item
        .news-right-img-top{
          display: flex;
          gap: 14px;
          margin-bottom: 14px;
          
        }
        .gameWeb_aboutP4_deco{
            width: 106px;
            height: 352px;
          }
          .gameWeb_aboutP4_news2{
            width: 621px;
            height: 400px;
          }
          .gameWeb_aboutP4_news3{
            width: 622px;
            height: 349px;
            margin-top: -40px;
          }
      }
    }
  }

  .news-footer {
    width: 603px;
    height: 52px;
    line-height: 52px;
    margin-top: 80px;
    text-align: left;
    background-color: #ffc35b;
    border-radius: 26px;
    padding-left: 20px;
    a {
      font-size: 26px;
      // font-family: "Poppins";
      font-weight: 400;
      color: #000;
      // text-decoration: underline;
    }
  }
}
</style>
