Нежелательная стеклянная рамка за пределами фоновых изображений

Я использую Django, HTML и CSS для создания веб-сайта для размещения некоторых фотографий, но я довольно новичок. Я использую стиль <div> с backgound-image для загрузки картинок на сайт. По какой-то причине каждая картинка загружается с некоторым радиусом границы (хотя в моем CSS его нет) и имеет странную стеклянную границу, некоторые картинки также имеют черную линию среди некоторых границ. Вот как это выглядит.

Мой html файл:

<div class="container">
<div class="photo-grid">
    {% for i in image|dictsort:'pub_date' %}
        {% if i.is_tall == True and i.is_wide == False %}
            <div class="card" style="background-image:url('{{i.image.url}}')">
                 {{i.title}}
            </div>

Мой CSS файл:

.container {
   display: flex;
   justify-content: center;
   justify-items: center;
 }
.photo-grid {
   display: grid;
   gap: 1rem;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   grid-auto-rows: 240px;
   margin-top: 75px;
   margin-bottom: 3vw;
   width: 1500px;
}
.card {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100%;
   width: 100%;
   overflow: hidden;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
 }

Я понятия не имею, что с ним может быть не так. Я пробовал удалять случайные строки CSS, но, похоже, ничего не помогает.

Вернуться на верх