Изображения в веб-фрейме должным образом размещаются в режиме рабочего стола, но в мобильном устройстве происходит перерыв

Question

Я построил деления с карточками столбцов в CSS, без bootstrap, поэтому я мог держать карты прямо на экране, не перемещая их. Это в первую очередь влияет на вид рабочего стола, где карты имеют ширину 25% и расположены в виде ромба. На этих карточках изображены изображения с абсолютной позицией, установленной справа внизу. Когда я нахожусь в режиме рабочего стола, значки работают нормально и располагаются в правом нижнем углу, где они должны. рабочий стол Однако, когда в мобильном представлении карты имеют ширину 100%, все четыре значка перемещаются вправо примерно на середину высоты страницы и накладываются друг на друга. мобильный просмотр . Я попытался удалить нижнее и правое позиционирование, которое, по крайней мере, вернуло их обратно в карты в левом нижнем углу, но я не могу понять, как исправить позиционирование, чтобы они оставались в картах в мобильном режиме. Ниже мой код для этих разделов

<div class="row">
<div class="column">
  <div class="card rounded" id="cyan">
    <h2 class="card-header">Supervisor</h2>
    <p class="light-gray card-body">Monitors activity to identify project roadblocks</p>
    <img class="icon" src="images\icon-supervisor.svg" alt="magnifyine glass">
  </div>
</div>
<div class="column">
  <div class="card rounded" id="red">
    <h2 class="card-header">Team Builder</h2>
    <p class="light-gray card-body">Scans our talent network to create the optimal team for your project</p>
    <img class="icon" src="images\icon-team-builder.svg" alt="house">
  </div>
</div>
<div class="column">
  <div class="card rounded" id="orange">
    <h2 class="card-header">Karma</h2>
    <p class="light-gray card-body">Regularly evaluates our talent to ensure quality</p>
    <img class="icon" src="images\icon-karma.svg" alt="light bulb">
  </div>
</div>
<div class="column">
  <div class="card rounded" id="blue">
    <h2 class="card-header">Calculator</h2>
    <p class="light-gray card-body">Uses data from past projects to provide better delivery estimates</p>
    <img class="icon" src="images\icon-calculator.svg" alt="computer">
  </div>
</div>

  background-color: white;
  border: 0;
  margin-top: 30px;
  text-align: left;
}

.card-header {

  border: 0;
  padding: 0 60px 0 30px;
}

.card-body{
  font-size: .85rem;
  font-weight: lighter;
  padding: 0 60px 150px 30px;
}

.column {
    display: block;
    width: 100%;
}

.icon {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 8%
}

.row {
  margin: 0 -5px;
}

#cyan{
  box-shadow: 0 -3px hsl(180, 62%, 55%),
  3px 10px 15px 5px hsl(229, 6%, 66%);
}

#red{
  box-shadow: 0 -3px hsl(0, 78%, 62%),
  3px 10px 15px 5px hsl(229, 6%, 66%);
}

#blue{
  box-shadow: 0 -3px hsl(212, 86%, 64%),
  3px 10px 15px 5px hsl(229, 6%, 66%);
}

#orange{
  box-shadow: 0 -3px hsl(34, 97%, 64%),
  3px 10px 15px 5px hsl(229, 6%, 66%);
}

h2.card-header{
  font-size: 1.5rem;
  font-weight: 600;
}

@media (min-width: 1440px){
  body{
    width: 1440px
  }
  .header{
    width: 620px;
  }
  .card {
    width: 400px;
  }

  .column {
    float: left;
    padding: 0 10px;
  }

  .attribution{
    margin-top: 650px;
  }
  .icon{
    width: 15%;
  }
  #cyan{
    position: absolute;
    left: 325px;
    top: 450px;
  }

  #blue{
    position: absolute;
    left: 1175px;
    top: 450px;
  }

  #red{
    position: absolute;
    left: 750px;
    top: 300px;
  }

  #orange{
    position: absolute;
    left: 750px;
    top: 600px;
  }
}```