@use "./shared.scss" as *;

.owner-wrapper {
  display: flex;
  max-width: $content-max-width;
  width: 100%;
  gap: 28px;
  > *:not(.title-widget-outter) {
    flex: 1 0 0;
  }
  @include point-tablet {
    display: grid;
    grid-template-columns: 1fr 1fr;
    .title-widget-outter {
      grid-column: 1 / span 2;
    }
    padding: 0 42px;
    transition: padding 420ms ease 0s;
  }
  @include point-phone {
    display: flex;
    flex-direction: column;
    > *:not(.title-widget-outter) {
      margin: 0 12px;
    }
    .title-widget-outter {
      margin-bottom: -30px;
    }
  }

  .title-widget-outter {
    position: relative;
    &::after {
      position: absolute;
      content: '';
      top: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      background-color: $brand-color;
      @include point-phone {
        height: calc(100% + 100px);
      }
    }
    .title-widget {
      @include text-widget(
        $title-color: #333,
        $content-color: #333,
        $background-color: transparent,
      )
    }
  }
}