.summary {
  gap: var(--mirai-ui-space-S);
  padding: var(--mirai-ui-space-M);
}

.summary .dates {
  align-items: flex-start;
}

.summary .dates > * {
  flex: 1;
}

.summary .cancellation .free {
  color: var(--mirai-ui-success);
}

/* S */
@media only screen and (max-width: 480px) {
  .summary {
    width: 100%;
  }
}

/* M */
@media only screen and (min-width: 481px) and (max-width: 1179px) {
  .summary .dates {
    gap: var(--mirai-ui-space-XS);
  }
}

/* L */
@media only screen and (min-width: 1180px) {
  .summary .dates {
    gap: var(--mirai-ui-space-S);
  }
}
