<template>
  <div>
    <div class="chip-container">
      <div class="chip-content">
        <div class="title"> <img src="../../assets/img/home/chip/chip-title.png" alt=""></div>
        <div class="container">
          <div class="grid">
            <div class="grid-item-red">  </div>
            <div class="grid-item-red"></div>
            <div class="grid-item-red"></div>
            <div class="grid-item-red"></div>
          </div>

          <div class="grid">
            <div class="grid-item-yellow"></div>
            <div class="grid-item-yellow"></div>
            <div class="grid-item-yellow"></div>
            <div class="grid-item-yellow"></div>
          </div>

          <div class="grid">
            <div class="grid-item-blue"></div>
            <div class="grid-item-blue"></div>
            <div class="grid-item-blue"></div>
            <div class="grid-item-blue"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
let ma;
</script>

<style lang="scss" scoped>
.chip-container {
  position: relative;
   
  .chip-content {
    width: 1440px;
    margin: 0 auto;
    // margin-top: 102px;
    .title{
      padding-top: 78px;
      display: flex;
      justify-content: center;
    }
    .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      grid-gap: 10px;
      width: 33.33%;
      margin-bottom: 20px;
    }
    .grid-item-red {
       background:url('@/assets/img/home/chip/red-bg.png') no-repeat;
      height: 200px;
    }
    .grid-item-yellow {
       background:url('@/assets/img/home/chip/yellow-bg.png') no-repeat;
      height: 200px;
    }
    .grid-item-blue{
       background:url('@/assets/img/home/chip/blue-bg.png') no-repeat;
      height: 200px;
    }
  }
}
</style>
