Подгон фотографии в карточке

Question

Здраствуйте! z Не могу подогнать фотографию как на макете, есть предложения как исправить? Также, буду рад если посоветуете ресурсы для обучения css.

Мой код:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Gilroy', sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

.conteiner {
  width: 1180px;
  margin: 0 auto
}

.content {
  padding-left: 80px;
  padding-right: 80px;
}

.mod {
  margin-left: 20px;
  font-size: 42px;
  font-family: "Graphik";
  color: #222020;
}

.card {
  display: inline-block;
  width: 480px;
  min-height: 505px;
  border: 1px solid #000;
  margin-right: 46px;
  margin-bottom: 20px;
  vertical-align: middle;
  position: relative;
}

.ex-1 {
  background-image: url("https://i.ibb.co/cr3W4r9/7.jpg");
  background-repeat: no-repeat;
}

.number {
  position: absolute;
  right: 20px;
  bottom: 20px;
  font-size: 16px;
}

<div class="conteiner">
  <h1>Skillbox</h1>
  <h5><a href="/skillbox.html" class="naz">Назад</a></h5>
  <div class="content">
    <h1 class="mod">Модули курса веб разработка</h1>
    <ul class="list">
      <li class="card ex-1">
        <h1>Введение</h1>
        <p>Как работают сайти.Верстка</p>
        <p>Возможности HTML,CSS,JS</p>
        <p>Редактор код.Codepen</p>
        <p>Робота з DevTools</p>
        <div class="number">01</div>
      </li>
    </ul>
  </div>
</div>

БЛОГ НА HUSL

Подгон фотографии в карточке

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