<li class="promotions__item promotion">
  <div class="promotion__picture column">
    <img src="https://i.pinimg.com/originals/0d/6d/50/0d6d5062ddbaf3288fbf58ad4890253b.jpg" alt="Пиратский корабль" width="476" height="329" class="promotion__image">
  </div>
  <div class="promotion__content column">
    <p class="promotion__discount">Скидка до 60%</p>
    <h3 class="promotion__subheading">За заказ зоны (от 25 человек) в локации «Черная жемчужина»
    </h3>
    <p class="promotion__text">
      Устали от городского шума, хотите провести праздник за городом в
      живописной локации? Заказывайте место в локации «Черная жемчужина». Здесь вас и ваших детей
      ждет настоящая пиратская шхуна с настоящими пиратами!
    </p>
    <div class="promotion__condition">
      <div class="promotion__condition-item">
        <b>Заказ от 25 до 30 человек:</b>
        <p>— Скидка 40% на аренду при заказе в будний день</p>
      </div>
      <div class="promotion__condition-item">
        <b>Заказ от 31 до 50 человек:</b>
        <p>— Скидка 55% на аренду при заказе в будний день</p>
      </div>
    </div>
    <small class="promotion__note">Купон действует в будние дни при наличии свободных мест</small>
  </div>
</li>

*,
*::before,
*::after{
  box-sizing:border-box
}

.promotion {
    display: flex;
    overflow: hidden;
    border: .3rem solid black;
    border-radius: 1.2rem;
}

.column {
}

.promotion__picture {
    max-height: 100%;
    overflow: hidden;
    width: 40%;
}

.promotion__image {
    display: block;
    margin: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.promotion__content {
    width: 60%;
    padding: 1rem;
    display: flex;
    align-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
}

.promotion__discount {
    margin: 0 1.5rem 0 0;
    padding: .75rem;
    background: var(--main-bg-color);
    color: white;
    border-radius: 10rem;
}

.promotion__subheading {
    margin: 0;
    width: 23rem;
}

.promotion__text {
    margin: 1.1rem 0 ;
}

.promotion__condition {
    margin: 0 0 1rem;
    display: grid;
    gap: .7rem;
}

.promotion__condition-item {}

.promotion__condition-item p {
    margin: 0;
}

.promotion__note {
    width: 100%;
    display: block;
    text-align: right;
}