.block_s44-content-accordion {
  background: var(--s44-light-green);
  position: relative;

  .block-image {
    position: absolute;
    height: 100%;
    width: 50%;
    top: 0;
    left: 0;




    img {
      position: relative;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    @media screen and (max-width: 991px) and (min-width: 767px) {
      width: 40%;
    }
  }

  .container {
    display: flex;

    h1, h2, h3, h4, h5, h6 {
      color: var(--s44-cream);
    }

    .heading-ac {
      margin-bottom: 20px;
    }


    .accordion-wrapper {
      width: 45%;
      margin-left: auto;

      @media screen and (max-width: 991px) and (min-width: 767px) {
        width: 50%;
      }

      .accordion-wrap {
        border-bottom: solid 1px var(--s44-cream);
        .accordion-heading {
          padding: 12px 0;
          display: flex;
          justify-content: space-between;
          gap: 24px;

          &.active {
            i {
              transform: rotate(45deg);
            }
          }
          &:hover {
            cursor: pointer;

            h3, i {
              color: var(--s44-extra-light-green);
            }
          }


          i {
            color: var(--s44-cream);
            margin: auto 0;
            transition: 0.3s ease;
            font-size: 22px;

          }

          h3 {
            font-family: var(--main-font);
            font-weight: 200;
            font-size: var(--h5_clamp);
            text-transform: none;
            transition: 0.3s ease;
          }
        }

        .accordion-copy {
          margin-bottom: 16px;
          color: var(--s44-cream);
          opacity: 0.8;
        }
      }
    }
  }

  &:after {
    content: '';
    position: absolute;
    width: 50%;
    height: 100%;
    background: linear-gradient(270deg, rgba(89,101,95, 1) 0%, rgba(89,101,95, 0) 90%);
    top: 0;
    left: 0;

    @media screen and (max-width: 991px) and (min-width: 767px) {
      width: 40%;
    }
  }

  @media screen and (max-width: 767px) {
    .block-image {
      width: 100%;
      height: 280px;

    }

    &:after {
      width: 100%;
      height: 280px;
      background: linear-gradient(0deg, rgba(89,101,95, 1) 0%, rgba(89,101,95, 0) 90%);
    }

    .container {
      margin-top: 316px;

      .accordion-wrapper {
        width: 100%;
      }
    }
  }
}