.section {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-x9);
}

.booking {
  display: grid;
  gap: var(--Spacing-x-one-and-half);
  grid-template-areas:
    "image"
    "details"
    "actions";
}

@media screen and (min-width: 768px) {
  .booking {
    grid-template-areas:
      "details image"
      "actions actions";
    grid-template-columns: 1fr minmax(256px, min(256px, 100%));
  }
}