CSS: преобразуйте вращение img в -45 град, заставляя изображение исчезать

Question

У меня неупорядоченный список баннеров.Баннер содержит изображение слева и текст справа.Я использовал трансформацию CSS для создания дизайна и CSS колонки для отображения списка из 2 колонок на мобильных устройствах.В Chrome второй столбец не показывает изображения.В то время как в сафари я вижу это с некоторыми задержками.В chrome, когда я удаляю свойство transfrom rotate из изображения, появляется изображение.

Попробовал использовать контейнер-обертку вокруг img и повернуть его.Codepen: https://codepen.io/khanharis87/pen/ZVJmLX

<div class="component--assortment-tile">
  <div class="wrapper">
    <ul class="assortment-tile__container is-unstyled">
      <li class="long-tile" class="column is-half">
        <div class="long-tile__container">
          <div class="long-tile__content-conainer">
            <div class="long-tile__media-container">
              <div class="long-tile__media-figure-container">
                <figure class="long-tile__media-figure">
                  <div class="image-container">
                    <img src="https://placekitten.com/300/300" />
                  </div>
                </figure>
              </div>
            </div>
            <div class="wrapper">
              <div class="columns is-mobile">
                <div class="column is-half is-offset-6">
                  <div class="long-tile__content-conainer-text">
                    <h3>Title</h3>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li class="long-tile" class="column is-half">
        <div class="long-tile__container">
          <div class="long-tile__content-conainer">
            <div class="long-tile__media-container">
              <div class="long-tile__media-figure-container">
                <figure class="long-tile__media-figure">
                  <div class="image-container">
                    <img src="https://placekitten.com/300/300" />
                  </div>
                </figure>
              </div>
            </div>
            <div class="wrapper">
              <div class="columns is-mobile">
                <div class="column is-half is-offset-6">
                  <div class="long-tile__content-conainer-text">
                    <h3>Title</h3>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

.component--assortment-tile {
  ul {
    columns: 2;
  }

  li {
    width: 175px;
    height: 50px;
  }

   .long-tile {
    background-color: #fff1f2;
    overflow: hidden;
    position: relative;

    .long-tile__media-figure-container {
      border: 1px solid grey;
      align-items: center;
      display: flex;
      flex: 0 0 50%;
      max-width: 50%;
      overflow: hidden;
      position: absolute;
      right: 9.75rem;
      top: 0.4375rem;
      transform: rotate(45deg) scale(1.6);
    }

    h3 {

      padding-top: 6.25rem;
    }

    img {
      object-fit: cover;
      transform: rotate(-45deg) translateX(0%) scale(1.5);
      transform-origin: center center;
    }
  }
}