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

[Anonymous]

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





















































































































< /code>
И это CSS, который сопровождает его < /p>
.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;
}


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