@import "../../vars";

.bloks {
    
    &-wrapper {
      display: flex;
      flex-wrap: wrap;
      margin-top: 21px;

      :not(:nth-child(3n)) {
        margin-right: 19.5px;
      }
    }
}

.bloks-item {
    max-width: 427px;
    width: 100%;
    height: 193px;
    background-color: rgba(171, 178, 191, 0.1);
    border-radius: 10px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
    
    &:hover {
        background-color: rgba(171, 178, 191, 0.8);

        .item-wrapper {

            .blocks__item-text {

                .item-title {
                    color: #fff;
                }

                .svg-wrapper {

                    &:after {
                        background-image: url("data:image/svg+xml,%3Csvg width='28' height='15' viewBox='0 0 28 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.5247 0.9375L26.2598 7.5L19.5247 14.0625' stroke='white' stroke-width='1.875' stroke-linecap='round'/%3E%3Cpath d='M26.2598 7.5L1.24399 7.5' stroke='white' stroke-width='1.875' stroke-linecap='round'/%3E%3C/svg%3E");
                    }
                }
            }
        }
    }
}

     .item-wrapper {
       display: flex;
       position: relative;

       .blocks__item-text {
           display: flex;
           flex-direction: column;
           justify-content: space-between;
           margin-top: 18px;
           margin-left: 19px;
       }

       .bloks__item-img {
           position: absolute;
           top: 15px;
           left: 134px;
           z-index: 1;
       }

       .img-second {
           top: -8px;
           left: 171px;
       }

       .img-third {
           top: -23px;
           left: 170px;
       }

       .img-four {
           top: 0px;
           left: 191px;
       }

       .img-five {
           top: 36px;
           right: -71px;
       }

       .img-six {
           top: -18px;
           left: 175px;
       }
   }

  .item-title {
        font-family: 'Muller';
        font-style: normal;
        font-weight: 500;
        font-size: 15px;
        line-height: 15px;
        color: #636B78;
        max-width: 191px;
        width: 100%;
        z-index: 2;
  }
        
  .title-five,
  .title-four {
      max-width: 225px;
      width: 100%;
  }

.svg-wrapper {
    position: relative;

    &:after {
        position: absolute;
        content: "";
        background-image: url("data:image/svg+xml,%3Csvg width='29' height='17' viewBox='0 0 29 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.063 1.67346L26.7754 8.38589L20.063 15.0983' stroke='%23F2994A' stroke-width='1.91784' stroke-linecap='round'/%3E%3Cpath d='M26.7754 8.38586L1.84351 8.38586' stroke='%23F2994A' stroke-width='1.91784' stroke-linecap='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: cover;
        width: 25px;
        height: 13px;
        margin-top: 89px;
    }
}