.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(50px, -webkit-min-content);
  grid-auto-rows: minmax(50px, min-content);
  -moz-column-gap: var(--umb-block-grid--column-gap, 0);
  column-gap: var(--umb-block-grid--column-gap, 0);
  row-gap: var(--umb-block-grid--row-gap, 0);
}

.umb-block-grid__layout-item {
  position: relative;
  /* 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);
}

[data-content-element-type-alias="twoColumnBlock5050"] {
  position: relative;
  /* 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);
}
[data-content-element-type-alias="twoColumnBlock5050"] .flexed-child {
  margin: 0;
  padding: 0;
  border: none;
}

.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;
  grid-auto-rows: minmax(50px, -webkit-min-content);
  grid-auto-rows: minmax(50px, min-content);
  -moz-column-gap: var(--umb-block-grid--areas-column-gap, 0);
  column-gap: var(--umb-block-grid--areas-column-gap, 30px);
  row-gap: var(--umb-block-grid--areas-row-gap, 0);
}
.umb-block-grid__area-container iframe {
  min-height: 350px !important;
  width: 100% !important;
}
/* .umb-block-grid__layout-item section {
  padding: 0px;
}
.umb-block-grid__area-container .flexed {
  justify-content: center;
} */

.umb-block-grid__area {
  position: relative;
  /* 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--grid-columns)
    );
  grid-row: span var(--umb-block-grid--area-row-span, 1);
}

[data-content-element-type-alias="twoColumnBlock5050"]
  [data-content-element-type-alias="twoColumnBlock5050"]
  .umb-block-grid__area-container {
  column-gap: var(--umb-block-grid--areas-column-gap, 25px);
}

@media (min-width: 1024px) {
  .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 var(--umb-block-grid--area-column-span, 1);
  }
}

@media (max-width: 991px) {
  .umb-block-grid__area-container,
  .umb-block-grid__block--view::part(area-container) {
    column-gap: var(--umb-block-grid--areas-column-gap, 25px) !important;
    row-gap: var(--umb-block-grid--areas-row-gap, 50px);
  }
  .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)
    );
  }
  .umb-block-grid__area-container,
  .umb-block-grid__block--view::part(area-container) {
    column-gap: var(--umb-block-grid--areas-column-gap, 25px) !important;
  }
  section.three-sections-row div {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
}

@media screen and (max-width: 575px) {
  .umb-block-grid__area {
    --umb-block-grid--grid-columns: 12 !important;
    --umb-block-grid--area-column-span: 12 !important;
    --umb-block-grid--area-row-span: 1 !important;
    margin-bottom: 1rem;
  }
  .umb-block-grid__area-container,
  .umb-block-grid__block--view::part(area-container) {
    column-gap: var(--umb-block-grid--areas-column-gap, 25px) !important;
  }
  section.three-sections-row div {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
  [data-content-element-type-alias="fourColumnBlock25"]
    .umb-block-grid__layout-item {
    --umb-block-grid--item-column-span: 4 !important;
  }
  [data-content-element-type-alias="resourcesComponent"],
  [data-content-element-type-alias="newsComponent"],
  [data-content-element-type-alias="fourColumnBlock25"] {
    width: 100% !important;
    margin-left: 0px !important;
    padding: 20px 0 !important;
  }
  [data-content-element-type-alias="newsComponent"]
    .umb-block-grid__layout-item
    h2 {
    margin-bottom: 0px;
  }
}

/* -------------------------------------------------------------------------- */
/* Four Column Block 25: Class Name `modules-four-cols` — grid + card frame */
/* -------------------------------------------------------------------------- */
.column.modules-four-cols > .umb-block-grid__area-container {
  align-items: stretch;
  column-gap: 24px;
  row-gap: 24px;
}

.column.modules-four-cols > .umb-block-grid__area-container > .umb-block-grid__area {
  min-width: 0;
  background-color: #fff;
  box-sizing: border-box;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.column.modules-four-cols > .umb-block-grid__area-container > .umb-block-grid__area > .umb-block-grid__layout-item {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.column.modules-four-cols .umb-block-grid__layout-item > .column {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* Responsive columns: 1 mobile | 2 tablet (+ tablet-wide) | 4 desktop */
@media (max-width: 599.98px) {
  .column.modules-four-cols > .umb-block-grid__area-container {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  }

  .column.modules-four-cols > .umb-block-grid__area-container > .umb-block-grid__area {
    grid-column-end: span 12 !important;
    min-width: 0;
  }
}

@media (min-width: 600px) and (max-width: 1023.98px) {
  .column.modules-four-cols > .umb-block-grid__area-container {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  }

  .column.modules-four-cols > .umb-block-grid__area-container > .umb-block-grid__area {
    grid-column-end: span 6 !important;
    min-width: 0;
  }
}

@media (max-width: 991px) {
  .column.modules-four-cols > .umb-block-grid__area-container {
    column-gap: 16px !important;
    row-gap: 20px;
  }

  .column.modules-four-cols > .umb-block-grid__area-container > .umb-block-grid__area {
    padding: 1.25rem;
  }
}

/* -------------------------------------------------------------------------- */
/* 2/3/4-col blocks: CMS class `equal-height` — matching column cell heights */
/* Row height follows the tallest cell; no fixed min-height when content is short. */
/* -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .column.equal-height > .umb-block-grid__area-container {
    align-items: stretch;
    grid-auto-rows: auto;
  }

  .column.equal-height > .umb-block-grid__area-container > .umb-block-grid__area {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .column.equal-height
    > .umb-block-grid__area-container
    > .umb-block-grid__area
    > .umb-block-grid__layout-item {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
  }

  .column.equal-height
    .umb-block-grid__layout-item[data-content-element-type-alias="standardContentComponent"]
    > .col {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 0 !important;
  }

  /* Text stays content-sized; coloured .col still grows when a sibling is taller */
  .column.equal-height
    .umb-block-grid__layout-item[data-content-element-type-alias="standardContentComponent"]
    > .col
    > .row {
    flex: 0 1 auto;
    width: 100%;
    align-items: stretch;
  }

  .column.equal-height
    .umb-block-grid__layout-item[data-content-element-type-alias="imageComponent"] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
  }

  .column.equal-height img.imageComponent {
    display: block;
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    object-fit: cover;
  }
}

/* -------------------------------------------------------------------------- */
/* Two-column 50/50: borders on direct areas/layout-items only (not 33-66). */
/* -------------------------------------------------------------------------- */
.content-grid-border {
  --content-grid-border-color: #e8e8e8;
  --content-grid-border-width: 1px;
}

.content-grid-border > .umb-block-grid__area-container {
  row-gap: 0 !important;
}

/* Desktop: 50/50 columns share a single vertical divider, rows use horizontal lines */
@media (min-width: 992px) {
  .content-grid-border > .umb-block-grid__area-container {
    column-gap: 0 !important;
  }

  /* Centre vertical between left and right halves */
  .content-grid-border
    > .umb-block-grid__area-container
    > .umb-block-grid__area[data-area-alias="leftBlock"] {
    border-right: var(--content-grid-border-width) solid
      var(--content-grid-border-color);
  }

  /* Full-width horizontal rules between stacked block rows (per column) */
  .content-grid-border
    > .umb-block-grid__area-container
    > .umb-block-grid__area
    > .umb-block-grid__layout-item:not(:last-child) {
    border-bottom: var(--content-grid-border-width) solid
      var(--content-grid-border-color);
  }
}

/* Tablet / mobile: areas stack — use horizontal separators instead */
@media (max-width: 991px) {
  .content-grid-border > .umb-block-grid__area-container {
    column-gap: 0 !important;
  }

  .content-grid-border
    > .umb-block-grid__area-container
    > .umb-block-grid__area[data-area-alias="leftBlock"]:not(:last-of-type) {
    border-bottom: var(--content-grid-border-width) solid
      var(--content-grid-border-color);
  }

  .content-grid-border
    > .umb-block-grid__area-container
    > .umb-block-grid__area
    > .umb-block-grid__layout-item:not(:last-child) {
    border-bottom: var(--content-grid-border-width) solid
      var(--content-grid-border-color);
  }
}