Как сделать так, чтобы четвертая строка изображений действовала как первые три строки? [закрыто] ⇐ Html

[Anonymous]

На моем веб-сайте-портфолио https://simplybrianscott.me/#gallery четвертый ряд изображений (изображения 10, 11, 12) не такого же размера, как остальные, и не реагирует так же, как первые три ряда. Как это исправить, чтобы все реагировало одинаково? Разве я не меняю правильный CSS?
Я пробовал поместить его в тот же класс, я также думал, что просто добавив четвертую строку в свой html, правила CSS будут автоматически применены к новой строке. Я также пробовал проверить в Google Chrome, что может помочь, но пока ничего не помогает.

Код: Выделить всё

.gallery {
--_height: 250px;
--_gap: .5rem;
display: flex;
--_grid-rows: var(--_height) var(--_height) var(--_height);
--_height-hover: calc(var(--_height) * 1.22);
--_height-not-hover: calc(var(--_height) / 1);
margin-right: auto;
margin-left: auto;
width: 100%;
max-width: 800px;
display: grid;
gap: var(--_gap);
}

@media (min-width:720px) {
.gallery {
grid-template-columns: repeat(4, 1fr);
}

}

.gallery>div {
height: fit-content;
display: grid;
grid-template-rows: var(--_grid-rows);
gap: var(--_gap);
transition: grid-template-rows 300ms ease-in-out;
}

.gallery>div>article {
position: relative;
text-align: center;
}

.gallery>div>article>div {
position: absolute;
bottom: 0;
left: 0;
background: #00000070;
font-size: 0.65rem;
color: white;
display: flex;
align-items: center;
gap: .25rem;
padding: .15rem 0.5rem;

}

.gallery>div>article>div>span {
font-size: 0.7rem;
color: red;
}

.gallery img {
width: 100%;
height: 100%;
object-fit: cover;

}

.gallery>div:has(>article:nth-child(1):hover) {
--_grid-rows: var(--_height-hover) var(--_height-not-hover) var(--_height-not-hover);
}

.gallery>div:has(>article:nth-child(2):hover) {
--_grid-rows: var(--_height-not-hover) var(--_height-hover) var(--_height-not-hover);
}

.gallery>div:has(>article:nth-child(3):hover) {
--_grid-rows: var(--_height-not-hover) var(--_height-not-hover) var(--_height-hover);
}

img {
max-height: 300px;
max-width: 300px;
}

a:hover {
color: #bbb;
}

.italic {
font-style: italic;
}

.small {
font-size: 0.8em;
}

/** LIGHTBOX MARKUP **/

.lightbox {
/* Default to hidden */
display: none;

/* Overlay entire screen */
position: fixed;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;

/* A bit of padding around image */
padding: 1em;

/* Translucent background */
background: rgba(0, 0, 0, 0.8);
}

/* Unhide the lightbox when it's the target */
.lightbox:target {
display: block;
}

.lightbox span {
/* Full width and height */
display: block;
width: 100%;
height: 100%;

/* Size and position background image */
background-position: center;
background-repeat: no-repeat;
background-size:  contain;
}

Код: Выделить всё

[url=#img1]
[img]images/landingpage.png[/img]
[/url]


[url=#img2]
[img]images/apps.png[/img]
[/url]


[url=#img3]
[img]images/bonniebook.png[/img]
[/url]


[url=#img4]
[img]images/appm.jpg[/img]
[/url]


[url=#img5]
[img]images/liebe.jpeg[/img]
[/url]


[url=#img6]
[img]images/appguide.jpg[/img]
[/url]


[url=#img7]
[img]images/uishop.jpg[/img]
[/url]


[url=#img8]
[img]images/site3.png[/img]
[/url]


[url=#img9]
[img]images/kiwi.jpg[/img]
[/url]


[url=#img10]
[img]images/skolos.jpg[/img]
[/url]


[url=#img11]
[img]images/lvwalk.jpg[/img]
[/url]


[url=#img12]
[img]images/neonmuseum.jpg[/img]
[/url]






[url=#gallery]

[/url]

[url=#gallery]

[/url]

[url=#gallery]

[/url]

[url=#gallery]

[/url]

[url=#gallery]

[/url]

[url=#gallery]

[/url]

[url=#gallery]

[/url]

[url=#gallery]

[/url]

[url=#gallery]

[/url]

[url=#gallery]

[/url]

[url=#gallery]

[/url]

[url=#gallery]

[/url]

Подробнее здесь: https://stackoverflow.com/questions/796 ... rst-3-rows