/* dynamic card */
.borderEffect {
    position: relative;
  }
  .backgraundImage .imgDiv {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    transition: transform 0.2s cubic-bezier(0.61, 0.66, 0.4, 1.14);
    z-index: 2;
  }
  .borderEffect::before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    width: 0;
    height: 0;
    border-top: 1px solid rgb(211, 206, 206);
    border-left: 1px solid rgb(211, 206, 206);
    transition: width 0.3s ease-out, height 0.3s ease-out;
    overflow: hidden;
    z-index: 5;
  }
  
  .borderEffect:hover::before {
    width: calc(100%);
    height: calc(100%);
    z-index: 5;
  }
  
  
  .borderEffect:active::before {
    width: calc(100%);
    height: calc(100%);
    z-index: 5;
  }
  
  .borderEffect::after {
    content: "";
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 0;
    height: 0;
    border-bottom: 1px solid rgb(211, 206, 206);
    border-right: 1px solid rgb(211, 206, 206);
    transition: width 0.3s ease-out, height 0.3s ease-out;
    z-index: 5;
  }
  
  .borderEffect:hover::after {
    width: calc(100%);
    height: calc(100%);
    z-index: 5;
  }
  
  .borderEffect:active::after {
    width: calc(100%);
    height: calc(100%);
    z-index: 5;
  }
  
  .backgraundImage:hover > .firstCover .imgDiv {
    opacity: 0.35;
    transition: transform 0.5s cubic-bezier(0.61, 0.66, 0.4, 1.14);
    transform: scale(1.03) translateZ(0);
    z-index: 2;
  }
  .backgraundImage:active > .firstCover .imgDiv {
    opacity: 0.35;
    transition: transform 0.5s cubic-bezier(0.61, 0.66, 0.4, 1.14);
    transform: scale(1.03) translateZ(0);
    z-index: 2;
  }
  .writingEffect > .firstCover .imgDivCover {
    position: absolute;
    opacity: 0;
    transition: opacity 0.2s linear 0.1s;
  }
  .firstCover {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-color: transparent;
  }
  .writingEffect:hover > .firstCover .imgDivCover {
    opacity: 1;
    transition: opacity 0.2s linear 0.1s;
  }
  .writingEffect:active > .firstCover .imgDivCover {
    opacity: 1;
    transition: opacity 0.2s linear 0.1s;
  }
  /* dynamic card */
  @media only screen and (max-width: 500px) {
    .borderEffect::after {
        border: 0px;
    }
    .borderEffect::before {
        border: 0px;
    }
}