@use "../abstracts" as *;

.main-contens{
  width: 100%;
  height: auto;
  padding: 0 20px;
  background-color: $white-fff;
}
.main-head-block{
  padding: 33px 30px;
  background: linear-gradient(102deg, #F8F9EC 2.93%, rgba(249, 239, 236, 0.80) 98.22%);
  border-radius: 16px;
  .head-block-tit{
    @include defaultFont($font-s-18, $font-w-600, #F86A56)
  }
  .head-block-text{
    @include defaultFont($font-s-13, $font-w-500, #F86A56)
  }
  .head-block-link-wrap{
    margin-top: 18px;
    .head-block-link{
      @include flex(10px);
      align-items: center;
      padding: 8px 13px;
      background-color: #CD8888;
      border-radius: 100px;
      @include defaultFont($font-s-12, $font-w-600, $white-fff);
      .block-arr{
        display: block;
        width: 6px;
        height: 11px;
        background: url(/assets/images/main/block_arr.svg)no-repeat center;
        background-size: cover;
      }
    }
  }
}

.main-grid-wrap{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-top: 15px;
  .main-grid-bx{
    min-height: 160px;
    padding: 40px 20px 10px;
    border-radius: 16px;
    &.bx01{
      background: linear-gradient(134deg, #F0EDFF 5.92%, #F0FFF6 96.24%);
    }
    &.bx02{
      background: linear-gradient(134deg, #FFF4F4 3.38%, #F2FFF5 98.09%);
    }
    &.bx03{
      background: linear-gradient(136deg, #F7FAF1 3.75%, #E6FCF7 98.46%);
    }
    &.bx04{
      background: linear-gradient(133deg, #FFFBEF 3.32%, rgba(243, 236, 255, 0.33) 100%);
    }
    .grid-bx-head{
      @include flex(0px);
      align-items: center;
      .main-bx-icon{
        @include flex(0px);
      }
      .main-bx-arr{
        display: block;
        margin-left: auto;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: #fff;
        background-image: url(/assets/images/main/main_contens_arr.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: 12px 12px;
      }
    }
    .grid-bx-body{
      margin-top: 16px;
      .grid-bx-body-tit{
        @include defaultFont($font-s-14, $font-w-600, #7896BA);
      }
      .grid-bx-body-txt{
        @include defaultFont($font-s-12, $font-w-500, #7896BA);
        opacity: 0.6;
        margin-top: 3px;
      }
    }
  }
}

@media screen and (max-width: 360px){
  .main-grid-wrap{
    .main-grid-bx{
      padding: 40px 20px 20px;
    }
  } 
}