#mydiv {
  /* position:relative; */
  position: relative;
    display: flex;
    flex-wrap: wrap;
}
/* front side */
.front-side,
.back-side {
  height: 54mm;
  width: 85.6mm;
  background-color: #fff;
  max-width: 100%;
  position: relative;
  border: 1px solid #ccc;
  border-radius: 3mm;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
}

.front-side {
  margin-bottom: 10px;
}

.front-side .name-company {
  position: absolute;
  text-align: center;
  width: 100%;
  top: 1mm;
  font-size: 10pt;
  text-transform: UPPERCASE;
  text-align: center;
}
.front-side .card-name {
  width: 50mm;
  position: absolute;
  text-align: center;
  width: 100%;
  top: 6mm;
  font-size: 7pt;
  font-weight: bold;
  text-transform: UPPERCASE;
  text-align: center;
}

.front-side .photo {
  position: absolute;
  width: 30mm;
  height: 40mm;
  top: 11mm;
  max-width: 30mm;
  max-height: 40mm;
  left: 4mm;
  background-color: #000;
}
.front-side .photo img {
  width: 100%;
  height: 100%;
}

.front-side .data-person {
  position: absolute;
  top: 13mm;
  right: 5mm;
}

.front-side .data-person .title {
  font-size: 8pt;
}
.front-side .data-person .text-form {
  margin-bottom: 1.7mm;
}

/* /front side */
/* back side */
.back-side .qr-code {
  position: relative;
  width: 100%;
  /* top: 10mm; */
  /* left: 5mm; */
  width: 40mm;
  height: 40mm;
  left: calc(50% - 20mm);
  top: 5mm;
}

.back-side .title {
  bottom: 2mm;
  position: absolute;
  font-size: 10pt;
  text-align: center;
  width: 100%;
}

/* /back side */