.use-cases{
  padding: 70px 0 60px;

  &__outter-wrap{
    padding: 50px 10px 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 30px;
  }

  &__title{
    position: relative;

    &:after{
      content: "";
      position: absolute;
      bottom: -30px;
      left: 50%;
      transform: translateX(-50%);
      width: 100px;
      border: 3px solid var(--color-6);
      border-radius: 50px;
    }
  }

  &__inner-wrap{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 40px;
    padding: 30px 10px 0;
    position: relative;
    transition: all .2s;

    &:after{
      content: asset("icon", "bg-blob-outline.svg");
      position: absolute;
      top: 30px;
      left: -30%;
      width: 90%;
      height: auto;
      z-index: -1;
    }

    &:before{
      content: asset("icon", "bg-blob-outline2.svg");
      position: absolute;
      bottom: 30px;
      right: -30%;
      width: 90%;
      height: auto;
      z-index: -1;
    }
  }

  &__single{
    display: flex;
    flex-direction: column;
    cursor: pointer;

    &:hover{
      .use-cases__single-content{
        margin-left: -10px;
        margin-right: -10px;
        padding: 20px 30px;
      }

      .use-cases__single-button{
        h6{
          color: var(--color-6);
        }

        &-icon{
          margin-left: 15px;
        }
      }
    }

    &-content{
      padding: 20px;
      background: var(--color-white);
      border: 1px solid var(--color-3);
      border-radius: 10px;
      box-shadow: 0px 0px 20px rgba(0, 37, 63, 0.1);
      margin-top: -10px;
      flex: 2 1 0;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: all .2s;

      &--restricted{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
                line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    }

    &-button{
      display: flex;

      h6{
        transition: all .2s;
      }

      &-icon{
        width: 24px;
        height: 24px;
        margin-left: 9px;
        transition: all .2s;
      }
    }

    &-image{
      width: 100%;
      height: 100%;
      margin-bottom: -10px;
      border-radius: 3px;

      &-wrap{
        border-top: 5px solid var(--color-6);
        border-radius: 10px;
      }
    }


    &-modal{
      background: var(--color-white);
      padding: 20px 30px;
      border-radius: 10px;
      opacity: 0;
      visibility: hidden;
      transition: all .2s;
      z-index: 1000;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

body.use-case-modal-open{
  .use-cases__single-modal{
    opacity: 1;
    visibility: visible;
  }
}