.hp-split-showcase {
  & .hp-split-showcase__body {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      'header'
      'image'
      'living'
      'assets';
    gap: 27px;
    padding: 53px 12px 19px 12px;

    @media (min-width: 768px) {
      grid-template-columns: repeat(2, 1fr);
      grid-template-areas:
        'header header'
        'image image'
        'living assets';
      padding: 53px 12px 19px 12px;
    }

    @media (min-width: 1024px) {
      grid-template-columns: repeat(3, minmax(300px, 420px));
      grid-template-areas:
        'header header header'
        'living image assets';
      row-gap: 55px;
      column-gap: 17px;
      align-items: end;
      padding: 58px 0 91px 0;
    }

    & > * {
      padding: 0 var(--wp--preset--spacing--50);
    }

    & .hp-split-showcase__header {
      grid-area: header;

      & h2 {
        max-width: 555px;

        @media (min-width: 1024px) {
          margin-bottom: 16px;
        }
      }
    }

    & .hp-split-showcase__image,
    & .hp-split-showcase__text-box-1,
    & .hp-split-showcase__text-box-2 {
      margin-top: 0;
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 0;
    }
    & .hp-split-showcase__text-box-1,
    & .hp-split-showcase__text-box-2 {
      padding: 31px 21px 21px 21px !important;

      @media (min-width: 1024px) {
        padding: 38px 21px !important;
      }

      & .wp-block-buttons {
        @media (min-width: 1024px) {
          width: 100%;
          justify-content: space-between;
        }
      }
    }

    & .hp-split-showcase__image {
      position: relative;
      grid-area: image;
      min-height: 440px;
      width: 100%;
      max-width: 100%;
      height: 100%;
      overflow: hidden;
      border-radius: 10px;
      box-shadow: 7px 8px 11px 1px rgba(0, 0, 0, 0.17);

      @media (min-width: 1024px) {
        box-shadow: none;
      }

      & figure,
      & img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transform-origin: center;
        transition: transform 0.2s ease-out;
        transform: scale(1);

        &:hover {
          transform: scale(1.02);
        }
      }
    }
    & .hp-split-showcase__text-box-1 {
      grid-area: living;
    }
    & .hp-split-showcase__text-box-2 {
      grid-area: assets;
    }

    & .hp-split-showcase__text-box-icon {
      width: 75px;
      height: 75px;
      object-fit: contain;
      object-position: center;
    }
  }
}