Верстка. Секция лендинга. Картинка выходит за контейнер. Появляется горизонтальный скролл — как убрать?

Question

В дизайне секции есть картинка, которая должна выходить за границы контейнера

На верстке я положил картинку в div контейнер. В таком случае появляется горизонтальный скролл. Мне не нужно, чтобы он был.

Я пробовал решение: Прописать контейнеру картинки overflow: hidden;. Это спасает, но в таком случае картинка обрезается. А мне надо чтобы она показывалась полностью.

Подскажите пожалуйста, как решить.

.section_crafted-for {
  padding-top: 85px;
  padding-bottom: 85px;
}

.section_crafted-for__content__main {
  margin-top: 30px;
  width: 800px;
}

.section_crafted-for__content__main .header-block p {
  margin-bottom: 44px;
}

.information-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 50px;
}

.information-item {
  display: flex;
}

.information-item img {
  align-self: flex-start;
}

.information-item__text-content {
  display: flex;
  flex-direction: column;
  margin-left: 16px;
}

.information-item__text-content h3 {
  margin-bottom: 7px;
}

.section_crafted-for__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.section_crafted-for__img-container {
  width: 420px;
  height: 460px;
  overflow: hidden;
}

.section_crafted-for__img-container img {
}

<section class="section_crafted-for">
  <div class="section_crafted-for__content container-1280">
    <div class="section_crafted-for__content__main">
      <div class="header-block">
        <h2 class="txt-header">Crafted for</h2>
        <p class="txt-paragraph">Stop wasting time and money designing and managing a website that<br> doesn’t get results. Happiness guaranteed!</p>
      </div>
      <div class="information-items">
        <div class="information-item">
          <img src="assets/information-items-icons/flash.svg">
          <div class="information-item__text-content">
            <h3 class="txt-subheader">Startup</h3>
            <p class="txt-paragraph">Short description for the ones who look for something new.</p>
          </div>
        </div>
        <div class="information-item">
          <img src="assets/information-items-icons/diagram.svg">
          <div class="information-item__text-content">
            <h3 class="txt-subheader">Startup</h3>
            <p class="txt-paragraph">Short description for the ones who look for something new.</p>
          </div>
        </div>
        <div class="information-item">
          <img src="assets/information-items-icons/search.svg">
          <div class="information-item__text-content">
            <h3 class="txt-subheader">Agency</h3>
            <p class="txt-paragraph">Short description for the ones who look for something new.</p>
          </div>
        </div>
        <div class="information-item">
          <img src="assets/information-items-icons/idea.svg">
          <div class="information-item__text-content">
            <h3 class="txt-subheader">App Landing</h3>
            <p class="txt-paragraph">Short description for the ones who look for something new.</p>
          </div>
        </div>
      </div>
    </div>
  <div class="section_crafted-for__img-container">
    <img src="assets/illustrations/illustration-1.png"></img>
  </div>
</section>

БЛОГ НА HUSL

Верстка. Секция лендинга. Картинка выходит за контейнер. Появляется горизонтальный скролл — как убрать?

Ответы (0 шт):