.modalWrapper {
  display: flex;
  flex-direction: column;
  max-height: 70dvh;
  width: 100%;
}

.form {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow-y: auto;
}

.form::-webkit-scrollbar {
  display: none;
}

.modalScrollable {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--Spacing-x2);
}

.imageContainer {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--Corner-radius-Medium);
  overflow: hidden;
  margin-top: var(--Spacing-x1);
  flex-shrink: 0;
  margin-bottom: var(--Spacing-x3);
}

.image {
  object-fit: cover;
}

.price {
  display: flex;
  gap: var(--Spacing-x2);
  align-items: center;
}

.contentContainer {
  display: flex;
  flex-direction: column;
}

.confirmStep {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: sticky;
  border-radius: var(--Corner-radius-Medium);
  bottom: 0;
  z-index: 10;
  background: var(--Surface-Primary-OnSurface-Default);
  padding-bottom: var(--Space-x15);
}

.description {
  display: flex;
  margin: var(--Spacing-x2) 0;
}

.actionButtons {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: var(--UI-Opacity-White-100);
  border-top: 1px solid var(--Base-Border-Normal);
  padding-bottom: var(--Space-x025);
}

.divider {
  display: flex;
  gap: var(--Space-x2);
  height: 24px;
}
@media screen and (min-width: 768px) {
  .modalWrapper {
    width: 492px;
  }
  .selectAncillarycontainer {
    width: 600px;
  }

  .imageContainer {
    height: 240px;
  }
}

@media screen and (min-width: 1052px) {
  .selectAncillarycontainer {
    width: 833px;
  }
}

.breakfastPriceList {
  display: flex;
  flex-direction: column;
}

.divider {
  display: none;
  height: var(--Space-x4);
}

@media screen and (min-width: 768px) {
  .breakfastPriceList {
    flex-direction: row;
    gap: var(--Space-x2);
  }

  .divider {
    display: block;
  }
}