dcx-content-body {
  display: block;
  height: 100%;
}

.umb-block-grid {
  --umb-block-grid--page-gutter: .875rem; /* 14px pages margin right/left space */
  /* gap between sections */
  --umb-block-grid--row-gap: 1rem; /* 16px */
  --umb-block-grid--column-gap: 0;
  --umb-block-grid--areas-column-gap: 0;

  height: 100%;

  margin-left: var(--umb-block-grid--page-gutter);
  margin-right: var(--umb-block-grid--page-gutter);
}

.umb-block-grid__layout-container {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--umb-block-grid--grid-columns, 1), minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-rows: minmax(0, auto);
  justify-items: center;
  row-gap: var(--umb-block-grid--row-gap);
  column-gap: var(--umb-block-grid--column-gap);
}
.umb-block-grid__layout-item {
  position: relative;
  width: 100%;
  /* For small devices we scale columnSpan by three, to make everything bigger than 1/3 take full width: */
  grid-column-end: span min(calc(var(--umb-block-grid--item-column-span, 1) * 3), var(--umb-block-grid--grid-columns));
  grid-row: span var(--umb-block-grid--item-row-span, 1);
}

/* Ensures rows expand fluidly to occupy the entire available viewport width */
.umb-block-grid > .umb-block-grid__layout-container > .umb-block-grid__layout-item[data-content-element-type-alias="gridFluidRow"],
.umb-block-grid > .umb-block-grid__layout-container > .umb-block-grid__layout-item[data-content-element-type-alias="gridFooterRow"] {
    max-width: calc(100% + var(--umb-block-grid--page-gutter) * 2);
    width: calc(100% + var(--umb-block-grid--page-gutter) * 2);
    margin-right: calc(var(--umb-block-grid--page-gutter) * -1);
    margin-left: calc(var(--umb-block-grid--page-gutter) * -1);
}


.umb-block-grid > .umb-block-grid__layout-container {
  height: 100%;
  /* THIS ONLY WORKS ON AV PCI PAYMENT PAGE. Where:
    - Row 1: Header (height: 0 is fixed)
    - Row 2: Booking Steps (height auto)
    - Row 3: Payment (height auto: main content)
    - Row 4: Footer (footer is the last row that fills the remaining space of viewport height)
  */
  grid-template-rows: 0 auto auto 1fr;
  /* height: 100%; mover a un media querie min-width */
}
/* Using [Grid]Fluid Row Block to create a full-width (100% viewport) section */
.umb-block-grid > .umb-block-grid__layout-container > .umb-block-grid__layout-item {
  max-width: 1248px;
}
.umb-block-grid > .umb-block-grid__layout-container > .umb-block-grid__layout-item:last-child {
  align-self: end;
}

.umb-block-grid__area-container,
.umb-block-grid__block--view::part(area-container) {
  position: relative;
  display: grid;
  grid-template-columns:
      repeat(var(--umb-block-grid--area-grid-columns,
      var(--umb-block-grid--grid-columns, 1)),
      minmax(0, 1fr));
  grid-auto-flow: row;
  /* The height of each row will be determined by the tallest item within that row. */
  grid-auto-rows: minmax(0, min-content);
  column-gap: var(--umb-block-grid--areas-column-gap);
  row-gap: var(--umb-block-grid--areas-row-gap, 0);
}
.umb-block-grid__area {
  /* gap between sections that are inside areas */
  --umb-block-grid--row-gap: 1.5rem;
  --umb-block-grid--column-gap: 0;

  position: relative;
  height: 100%;
  /* For small devices we scale columnSpan by three, to make everything bigger than 1/3 take full width: */
  grid-column-end: span min(calc(var(--umb-block-grid--area-column-span, 1) * 3), var(--umb-block-grid--area-grid-columns));
  grid-row: span var(--umb-block-grid--area-row-span, 1);
}


/* This value is custom, usefull only for AV Payment Page */
@media (min-width: 993px) {
  .umb-block-grid {
    --umb-block-grid--page-gutter: 1rem; /* 16px */
    --umb-block-grid--row-gap: 2rem; /* 32px */
    --umb-block-grid--areas-column-gap: 2rem; /* 32px */
  }
  .umb-block-grid__layout-item {
      grid-column-end: span min(var(--umb-block-grid--item-column-span, 1), var(--umb-block-grid--grid-columns));
  }
  .umb-block-grid__area {
      grid-column-end: span min(var(--umb-block-grid--area-column-span, 1), var(--umb-block-grid--area-grid-columns));
  }
  .umb-block-grid__layout-item[data-content-element-type-alias="gridFooterRow"] {
    align-self: end;
  }
}


/* THIS ONLY WORKS ON AV PCI PAYMENT PAGE
  - Row 1: Header (height: 0 is fixed)
  - Row 2: Booking Steps (height auto)
  - Row 3: Payment (height auto: main content)
  --- Row 4: Footer row removed - footer is not visible
*/
@media (max-width: 992px) {
  .umb-block-grid > .umb-block-grid__layout-container {
    grid-template-rows: 0 auto auto;
  }
  .umb-block-grid__layout-item[data-content-element-type-alias="pageGridPayment"] {
    padding-bottom: var(--summary-actions-height);
  }

  /* Applying flex display to prevent the Summary column from creating
  unwanted horizontal overflow when it is fixed at the bottom of the page, overriding the previous CSS Grid behavior */
  .umb-block-grid__layout-item[data-content-element-type-alias="pageGridPayment"] .umb-block-grid__area-container {
    display: flex;
    flex-direction: column;
  }
  .umb-block-grid__layout-item[data-content-element-type-alias="gridFooterRow"] {
    display: none;
  }
}

/* THIS ONLY WORKS ON AV PCI PAYMENT PAGE
  --- Row 1: Header changes - in this media querie header is not floating
  - Row 2: Booking Steps (height auto)
  - Row 3: Payment (height auto: main content)
  --- Row 4: Footer removed - footer is not visible
*/
@media (min-width: 641px) and (max-width: 991px) {
  .umb-block-grid > .umb-block-grid__layout-container {
    grid-template-rows: auto auto auto;
  }
}

/* THIS ONLY WORKS ON AV PCI PAYMENT PAGE. Where:
  --- Row 1: Header changes - part is floating again (title) and searchSummary is relative. 62px is the height of searchSummary.
  --- Row 2: Booking Steps removed - Booking Steps is not visible
  - Row 3: Payment (height auto: main content)
  --- Row 4: Footer removed - footer is not visible
*/
@media (max-width: 640px) {
  .umb-block-grid > .umb-block-grid__layout-container {
    grid-template-rows: auto auto;
  }
  .umb-block-grid__layout-item[data-content-element-type-alias="gridBookingStepsRow"] {
    display: none;
  }
}