Как сделать видимой картинку в Swiper slider на другом блоке?

У меня есть секция с двумя блоками. В одном из блоков слайдер. Подскажите, как сделать так, чтоб картинка выходила на 50% на другой блок?

import React, { useState, useRef } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { EffectFade, Pagination, Autoplay, Controller } from 'swiper/modules';
import Button from '../Button/Button';
import phone from '../../assets/icons/phone-svg.svg';
import done from '../../assets/icons/done-svg.svg';
import styles from './Carousel.module.scss';

import 'swiper/css';
import 'swiper/css/effect-fade';
import 'swiper/css/pagination';

function Carousel() {
  const images = [
    {
      src: './images/hero01.webp',
      alt: 'Image 1',
    },
    {
      src: './images/hero02.webp',
      alt: 'Image 2',
    },
    {
      src: './images/hero03.webp',
      alt: 'Image 3',
    },
  ];

  const pagination = {
    clickable: true,
    // el: styles.pagination,
    bulletClass: styles.singleBullet,
    bulletActiveClass: styles.activeBullet,
    renderBullet(index, className) {
      return `<span class="${className}">0${index + 1}</span>`;
    },
    // type: 'bullets',
  };

  return (
    <>
      <div className={styles.hero}>
        <div className={styles.staticContainer}>
          <h1 className={styles.heroTitle}>Highest Quality Marijuana Seeds</h1>
          <p className={styles.staticText}>
            “Seeds of Change” is a multifaceted exploration of the cannabis
            industry and social justice. We’re on a mission to strengthen our
            industry through equity, and unlock economic empowerment. We will
            lead with, and be led by, justice for all
          </p>
          <Button
            type="button"
            text="Our Products"
            className="orangeBtn"
            // className="whiteBtn"
            onClick={() => {}}
          />
          {/* <div className={styles.contactInfo}> */}
          <p className={styles.contactsMessage}>
            Our support team is available 24/7 to resolve any product issues
          </p>

          <div className={styles.contactInfo}>
            <img className={styles.phoneImg} src={phone} alt="phone" />
            <div className={styles.phoneNumText}>
              <span>Phone number</span>
              <a href="+38(068)-548-46-98" className={styles.linkTel}>
                +38(068)-548-46-98
              </a>
            </div>
          </div>
          {/* </div> */}
        </div>
        <div className={styles.dinamicContainer}>
          {/* <div className={styles.heroImgSwiper}> */}
          <Swiper
            modules={[EffectFade, Autoplay, Controller]}
            slidesPerView={1}
            autoplay={{
              delay: 2500,
              disableOnInteraction: false,
            }}
            effect="fade"
            fadeEffect={{ crossFade: true }}
            className={styles.heroImgSwiper}
          >
            {images.map((image) => (
              <SwiperSlide key={image.src}>
                <img
                  className={styles.heroImg}
                  src={image.src}
                  alt={image.alt}
                />
              </SwiperSlide>
            ))}
          </Swiper>
          {/* </div> */}

          <Swiper
            modules={[EffectFade, Autoplay, Pagination, Controller]}
            slidesPerView={1}
            autoplay={{
              delay: 2500,
              disableOnInteraction: false,
            }}
            effect="fade"
            fadeEffect={{ crossFade: true }}
            pagination={pagination}
            breakpoints={{
              576: {
                // direction: 'vertical',
              },
            }}
            className={styles.heroTextSwiper}
          >
            <SwiperSlide>
              <div className={styles.paginationWrap}>
                <h2 className={styles.title}>Purple Hawaiian Haze</h2>
                <p className={styles.info}>
                  This sweet strain will infuses you with an invigorating
                  euphoria perfect for outdoor activities and social gatherings
                </p>
                <ul className={styles.list}>
                  <div className={styles.link}>
                    <img className={styles.doneImg} src={done} alt="done" />
                    <li>Sativa-Dominant</li>
                  </div>
                  <div className={styles.link}>
                    <img className={styles.doneImg} src={done} alt="done" />
                    <li>THC 110.0-160.0mg/g</li>
                  </div>
                  <div className={styles.link}>
                    <img className={styles.doneImg} src={done} alt="done" />
                    <li>CBD 0.0-1.0mg/g</li>
                  </div>
                </ul>
                <p className={styles.aboutProduct}>About Product</p>
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div className={styles.paginationWrap}>
                <h2 className={styles.title}>Sour Diesel</h2>
                <p className={styles.info}>
                  This strain features a pungent flavor profile that smells like
                  diesel. It helps to help relieve symptoms associated with
                  depression, pain, and stress
                </p>
                <ul className={styles.list}>
                  <div className={styles.link}>
                    <img className={styles.doneImg} src={done} alt="done" />
                    <li>Sativa-Dominant</li>
                  </div>
                  <div className={styles.link}>
                    <img className={styles.doneImg} src={done} alt="done" />
                    <li>THC 160.0-190.0mg/g</li>
                  </div>
                  <div className={styles.link}>
                    <img className={styles.doneImg} src={done} alt="done" />
                    <li>CBD 0.0-2.0mg/g</li>
                  </div>
                </ul>
                <p className={styles.aboutProduct}>About Product</p>
              </div>
            </SwiperSlide>
            <SwiperSlide>
              <div className={styles.paginationWrap}>
                <h2 className={styles.title}>Northern Lights</h2>
                <p className={styles.info}>
                  It relaxing muscles and easing the mind, help relieve symptoms
                  associated with depression, stress, pain and insomnia
                </p>
                <ul className={styles.list}>
                  <div className={styles.link}>
                    <img className={styles.doneImg} src={done} alt="done" />
                    <li>Indica-Dominant</li>
                  </div>
                  <div className={styles.link}>
                    <img className={styles.doneImg} src={done} alt="done" />
                    <li>THC 170.0-180.0mg/g</li>
                  </div>
                  <div className={styles.link}>
                    <img className={styles.doneImg} src={done} alt="done" />
                    <li>CBD 0.0-1.0mg/g</li>
                  </div>
                </ul>
                <p className={styles.aboutProduct}>About Product</p>
              </div>
            </SwiperSlide>
          </Swiper>
        </div>
      </div>
      <div />
    </>
  );
}
export default Carousel;

@mixin for-size($size) {
  @media (min-width: $size) {
    @content;
  }
}

.hero {
  text-align: center;
  width: 100%;
  @include for-size(576px) {
    text-align: left;
  }
  @include for-size(1200px) {
    display: flex;
    // position: relative;
    // z-index: -1;
  }
}

.staticContainer {
  @include for-size(1200px) {
    width: 50%;
    position: relative;
    z-index: -1;
  }
}

.heroTitle {
  color: #214842;
  font-size: 36px;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 900;
  @include for-size(768px) {
    font-size: 40px;
  }
  @include for-size(992px) {
    font-size: 56px;
  }
  @include for-size(1200px) {
    max-width: 500px;
  }
}

.staticText {
  font-size: 17px;
  color: #556260;
  line-height: 1.5;
  padding-bottom: 20px;
  @include for-size(1200px) {
    max-width: 400px;
  }
}

.phoneImg {
  width: 40px;
  height: 40px;
  padding-bottom: 15px;
  @include for-size(576px) {
    padding-right: 15px;
  }
}

.contactsMessage {
  padding-top: 20px;
  color: #556260;
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
}

.contactInfo {
  display: flex;
  align-items: center;
  flex-direction: column;
  @include for-size(576px) {
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
  }
}

.phoneNumText {
  display: flex;
  flex-direction: column;
}

span {
  font-size: 14px;
  color: #556260;
}

.linkTel {
  font-size: 14px;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  color: #214842;
  text-decoration: none;
  padding-top: 5px;
  padding-bottom: 80px;
}

.dinamicContainer {
  background-color: #214842;
  padding-top: 40px;
  padding-bottom: 40px;
  // position: relative;
  // z-index: 1;
  @include for-size(1200px) {
    width: 50%;
    position: relative;
    z-index: 1;
  }
}

.heroImg {
  max-width: 100%;
  height: 350px;
  margin: 0 auto;
  object-fit: cover;
  @include for-size(992px) {
    height: 510px;
  }
  @include for-size(1200px) {
    transform: translateX(-50%);
    z-index: 1;
    position: relative;
    height: 550px;
  }
}

.infoProductContainer {
  display: flex;
  flex-direction: column;
}

.textImg {
  color: white;
  font-weight: bold;
  font-size: 20px;
}

.title,
.info,
.link {
  color: white;
}

.title {
  font-size: 30px;
  @include for-size(992px) {
    font-size: 36px;
  }
}

.info {
  font-size: 17px;
  line-height: 24px;
  @include for-size(576px) {
    max-width: 300px;
  }
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.link {
  font-size: 17px;
  display: flex;
  justify-content: center;
  @include for-size(576px) {
    justify-content: flex-start;
  }
}

.doneImg {
  padding-right: 10px;
  padding-bottom: 10px;
}

.aboutProduct {
  font-size: 17px;
  display: inline-block;
  color: #efc368;
  position: relative;
  padding-bottom: 30px;
}

.aboutProduct::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 22px;
  width: 100%;
  height: 2px;
  background-color: #efc368;
}

.paginationWrap {
  position: relative;
}

.singleBullet {
  font-weight: 600;
  font-size: 16px;
  color: white;
  padding-right: 15px;
  transition-property: font-size;
  transition-timing-function: ease;
  transition-duration: 0.3s;
  @include for-size(576px) {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 20px;
    position: relative;
    bottom: 230px;
  }
  @include for-size(768px) {
    position: relative;
    bottom: 115px;
  }
}

.activeBullet {
  font-weight: 700;
  font-size: 22px;
}

.heroImgSwiper {
  // overflow: visible !important;
  @include for-size(1200px) {
    position: relative;
    z-index: 1;
  }
}