barebones/assets/styles/layout/_main.scss

.page-404 {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align:center;
}

.wp-block-cover {
  position:relative;
  overflow-x: hidden;

  img {
    width: 100%;

    @include resp-max($breakpoint-md) {
      width: 120%;
      max-width: unset;
      height: auto;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
    }

    @include resp-max($breakpoint-sm) {
      height: 80vh;
      width: auto;
      position: relative;
      left: 70%;
    }

    @include resp-max($breakpoint-xs) {
      left:100%;
    }
  }

  .wp-block-cover__inner-container {
    position: absolute;
    bottom:50%;
    left: 50%;
    transform: translate3d(-50%,50%,0);
    width: 100%;
    z-index: 3;
  }
}

.fullwidth {
  max-width: unset !important;

  &.row {
    gap:20px;

    &::before,
    &::after {
      display:none;
    }

    @include resp-min($breakpoint-sm) {
      .col {
        padding-left:0;
      }
    }
  }

  @include resp-min($grid-max-width) {
    margin-left: calc(0px - $grid-gutter - ((100vw - $grid-max-width) / 2)) !important;
    margin-right: calc(0px - $grid-gutter - ((100vw - $grid-max-width) / 2)) !important;
  }

  @include resp-max($grid-max-width - 1) {
    margin-left: calc(0px - $grid-gutter) !important;
    margin-right: calc(0px - $grid-gutter) !important;
  }

  @include resp-max($breakpoint-sm) {
    >* {
      padding-left: $grid-gutter;
      padding-right: $grid-gutter;
    }
  }

  >div.is-layout-constrained {
    @include clearfix;
    max-width: $grid-max-width;
    margin: 0 auto;
    padding: 0 $grid-gutter;

    >div.row {
      @include resp-max($breakpoint-sm) {
        margin-right: -$grid-gutter;

        .col {
          padding-right: $grid-gutter;
        }
      }
    }
  }
}