/* ========= responsive for 1366 screen ========= */
@media only screen and (max-width: 1366px) {}

/* ========= responsive for 1200 screen ========= */
@media only screen and (max-width: 1199px) {}

/* ========= responsive for 992 screen ========= */
@media only screen and (max-width: 991px) {
  .my-card {
    flex-direction: column;
    align-items: center;
    padding: 15px;
  }
  .my-card-header {
    margin-bottom: 15px;
  }
}

/* ========= responsive for 768 screen ========= */
@media only screen and (max-width: 767px) {
  .my-card .my-card-row {
    margin-bottom: 0;
  }
  .my-card .my-card-col {
    width: 100%;
    float: none;
    margin-bottom: 20px;
  }
  .my-card .label,
  .my-card .value {
    display: inline-block;
  }
}

/* ========= responsive for 575 screen ========= */
@media only screen and (max-width: 575px) {}

/* ========= responsive for 480 screen ========= */
@media only screen and (max-width: 480px) {}
@media only screen and (max-width: 397px) {}

/* ========= responsive for 360 screen ========= */
@media only screen and (max-width: 360px) {}