@media (min-width: 23em) {
  footer {
    flex-direction: row;
    gap: calc((10 / 16) * 1rem);
  }

  .boxv {
    display: inline;
  }
}
@media only screen and (min-width: 30em) {
}
@media only screen and (min-width: 43em) {
}
@media only screen and (min-width: 58em) {
}
@media only screen and (min-width: 70em) {
  main {
    display: flex;
  }
  .cards-container {
    color: var(--white);
    background-image: url(../images/bg-main-desktop.png);
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    width: calc((500 / 16) * 1rem);
    padding: none;

    display: grid;
    place-content: center;
  }
  .cards {
    max-width: none;
    max-height: none;
    height: calc((520 / 16) * 1rem);
    width: calc((400 / 16) * 1rem);
    padding: 0;
    margin: 0;
    position: relative;
  }
  .cards__card {
    font-size: calc((18 / 16) * 1rem);
    letter-spacing: calc((2 / 16) * 1rem);
    width: calc((450 / 16) * 1rem);
    height: calc((247.5 / 16) * 1rem);
  }
  .cards__card--front {
    top: 0;
    left: 0;
  }
  .card__logo {
    height: calc((45 / 16) * 1rem);
    top: calc((25 / 16) * 1rem);
    left: calc((25 / 16) * 1rem);
  }
  .card__number {
    font-size: calc((27 / 16) * 1rem);
    letter-spacing: calc((3 / 16) * 1rem);
    bottom: calc((80 / 16) * 1rem);
    left: calc((25 / 16) * 1rem);
  }
  .card__name {
    bottom: calc((30 / 16) * 1rem);
    left: calc((25 / 16) * 1rem);
  }
  .card__date {
    bottom: calc((30 / 16) * 1rem);
    right: calc((25 / 16) * 1rem);
  }
  .cards__card--back {
    top: calc((280 / 16) * 1rem);
    left: calc((50 / 16) * 1rem);
  }
  .card__code {
    top: calc((112 / 16) * 1rem);
    right: calc((60 / 16) * 1rem);
  }

  .form-container {
    height: 100vh;
    width: 100%;
    display: grid;
    place-content: center;
  }
  .form .form-control {
    margin-bottom: calc((30 / 16) * 1rem);
  }
  .form label {
    margin-bottom: calc((15 / 16) * 1rem);
  }
  .form input {
    padding: calc((10 / 16) * 1rem) calc((20 / 16) * 1rem);
  }
}