.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);
}

.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 {
  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);
}

@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);
  }
}

/*Mobile View */

@media screen and (max-width: 769px) {
    .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;
    }
}

@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;
  }
}

@media screen and (max-width: 475px) {
    .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;
    }
}