.modal {
  display: none;
}

.modal.is-open {
  display: block;
}

.card_form {
  display: grid;
  grid-template:
    "card"
    "selector"
    "data"
    "format";
  height: 100vh;
  overflow-y: auto;
}

@media (min-width: 1024px) {
  .card_form {
    grid-template: "data card card format";
    grid-template-columns: 25% 25% 25% 25%;
  }
}

.card_form__data {
  grid-area: data;
  min-height: 250px;
  overflow-y: auto;
}

.card_form__card {
  display: grid;
  grid-area: card;
  min-height: 400px;
  overflow-y: auto;
}

.card_form__format {
  grid-area: format;
  min-height: 250px;
  overflow-y: auto;
}

.card_form__selector {
  display: flex;
  grid-area: selector;
  align-items: space-between;
}

.card_canvas__container--horizontal {
  width: 500px;
}

.card_canvas__container--vertical {
  width: 350px;
}

.card_canvas__image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.empty_card--horizontal {
  position: relative;
  display: block;
  width: 100%;
  padding-bottom: 56.25%;
}

.empty_card--vertical {
  position: relative;
  display: block;
  padding-bottom: 177.77%;
}

[x-cloak] {
  display: none;
}