@media screen and (min-width: 400px) {
  .card-custom {
    transform: translate(50%, -50%);
  }
}

@media screen and (min-width: 500px) {
  .card-custom {
    transform: translate(50%, -50%);
  }
}

@media screen and (min-width: 600px) {
  .card-custom {
    transform: translate(50%, -50%);
  }
}

@media screen and (min-width: 700px) {
  .card-custom {
    transform: translate(50%, -120%);
  }
}

@media screen and (min-width: 800px) {
  .card-custom {
    transform: translate(50%, -130%);
  }
}

@media screen and (min-width: 900px) {
  .img-profile {
    height: auto;
  }

  .card-custom {
    transform: translate(50%, -180%);
  }
}

@media screen and (min-width: 901px) {
  .img-profile {
    height: 700px !important;
  }

  .card-custom {
    transform: translate(50%, -180%);
  }
}

@media screen and (min-width: 1000px) {
  .card-custom {
    transform: translate(50%, -175%);
  }
}

@media screen and (min-width: 1100px) {
  .card-custom {
    transform: translate(50%, -160%);
  }
}

@media screen and (min-width: 1200px) {
  .card-custom {
    transform: translate(50%, -155%);
  }
}

@media screen and (min-width: 1300px) {
  .card-custom {
    transform: translate(50%, -160%);
  }
}

@media screen and (min-width: 1400px) {
  .card-custom {
    transform: translate(50%, -175%);
  }
}

@media screen and (min-width: 1500px) {
  .card-custom {
    transform: translate(50%, -170%);
  }
}

@media screen and (min-width: 1600px) {
  .card-custom {
    transform: translate(50%, -275%);
  }
}

@media screen and (min-width: 1700px) {
  .card-custom {
    transform: translate(50%, -280%);
  }
}

@media screen and (min-width: 1800px) {
  .card-custom {
    transform: translate(50%, -300%);
  }
}