.color_card_container{
  position: relative;
  aspect-ratio: 326 / 330;
  overflow: hidden;
  border-radius: var(--border-radius);
  & .card_blur{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: 1;
    width: 109.54%;
    aspect-ratio: 356 / 196;
    border-radius: 22.25rem;
    filter: blur(2.625rem);
  }
  & .card_mask{
    position: absolute;
    inset: 0;
    z-index: 3;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 100%);
    opacity: 0;
    transition: opacity cubic-bezier(.42,0,.03,1) .7s;
  }
  & .card_img{
    position: relative;
    z-index: 2;
    display: block !important;
    width: 100%;
    object-fit: cover;
    transition: transform cubic-bezier(.42,0,.03,1) .7s !important;
  }
  & .card_content{
    position: absolute;
    left: 0;
    right: 0;
    bottom: -60px;
    z-index: 10;
    padding: 1.25rem .75rem;
    backdrop-filter: blur(1.5625rem);
    transition: all cubic-bezier(.42,0,.03,1) .7s;
    & .card_content_header{
      display: flex;
      align-items: center;
      margin-bottom: .75rem;
      & .icon{
        width: 1.375rem;
        height: 1.375rem;
        margin-right: .3125rem;
      }
      & .title{
        line-height: 1;
        color: #fff;
        font-size: 1.5rem;
        font-weight: 900;
        text-transform: uppercase;
        transition: color cubic-bezier(.42,0,.03,1) .7s;
        white-space: nowrap;
      }
    }
    & .desc{
      height: 2.25rem;
      color: #fff;
      font-size: .875rem;
      line-height: 1.125rem;
      font-weight: 400;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      white-space: normal;
      transition: color cubic-bezier(.42,0,.03,1) .7s;
    }
    & .go_btn{
      display: block;
      width: 100%;
      user-select: none;
      border-radius: var(--border-radius);
      font-weight: 700;
      cursor: pointer;
      transition: transform .2s cubic-bezier(.36,.66,.04,1);
      height: 2.5rem;
      margin-top: .75rem;
      color: #fff;
      & .btn_inner{
        display: flex;
        align-items: center;
        -webkit-box-pack: center;
        justify-content: center;
        width: 100%;
        height: 100%;
      }
    }
  }
  &:hover{
    & .card_content{
      bottom: -5px;
    }
    & .card_img{
      transform: scale(1.1)
    }
    & .card_mask{
      opacity: 1;
    }
  }
}
.color_cards_grid{
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: .9375rem;
  //margin-top: 40px;
  //margin-bottom: 40px;
}
