Как расположить блок с кнопкой «добавить в избранное»?

Question

[Марат Шакиров]

Вывожу карточки с новостями на страницу (синий - карточка, зеленый - картинка, белый - иконка звездочки для добавления в избранное), мне нужно, чтобы блок избранное у каждой нечетной карточки прижимался не к правой границе, а к картинке. Так как картинка вложена в блок, не получается использовать :nth-child(odd).

https://codepen.io/shakirov-marat/pen/poOZRwZ

Comments

[Максим]

even и odd проверьте оба

[Марат Шакиров]

Максим, ни один не работает, потому что он вложен в блок .box, а для nth-child блоки должны находиться на одном уровне вложенности

[szQocks]

<div class="block">
    <div class="box">
      <div class='image'></div>
      <div class="info">
        <div class="fav-icon"></div>
      </div>
    </div>

    <div class="box">
      <div class='image'></div>
      <div class="info">
        <div class="fav-icon"></div>
      </div>
    </div>

    <div class="box">
      <div class='image'></div>
      <div class="info">
        <div class="fav-icon"></div>
      </div>
    </div>
  </div>

.block {
  display: grid;
  grid-auto-rows: 100px;
  gap: 20px;
  margin: 0 auto;
  padding: 20px;
  width: 500px;
  border: 1px solid black;
  height: 500px;
}

.box {
  display: flex;
  width: 100%;
  border: 1px solid black;
  margin: 0 auto;
  background-color: lightblue;
}

.box:nth-child(odd) {
  flex-direction: row-reverse;
}

.image {
  width: 30%;
  height: 100%;
  background-color: lightgreen;
}

.image:nth-child(odd) {
  right: 620px;
}

.info{
  width: 100%;
  height: 100%;
  position: relative;
}
.fav-icon{
  width: 20px;
  height: 20px;
  background-color: white;
  position: absolute;
  right: 0;
  top: 0;
}

[Марат Шакиров]

szQocks, спасибо огромное, вы меня выручили ! :)