.archive-stages-description{
    margin-bottom:30px;
}

/* ---- */

.archive-stages-form{
    --gap-items:22px;    
    --items-per-line:4;      
    margin-bottom:30px;    
}

/* ---- */

.archive-stages-list{    
    --gap-items:20px;  
    --items-per-line:2;     
    margin-bottom:50px;
}
.archive-stages-item{
    background: #ccc;    
    aspect-ratio:1/0.38;
    position:relative;
    background-size:100%;
    background-repeat:no-repeat;
    background-position:center;
    transition: background-size 0.25s;
    overflow: hidden;
}
.archive-stages-item:hover{
    background-size:110%;
}
.archive-stages-item::after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
    z-index:5;
    box-shadow: inset 0px -49px 68px 0px rgb(0 0 0 / 60%);
}
.archive-stages-item-infos{
    position:absolute;
    z-index:6;
    bottom:0;
    left:0;
    width:100%;
    padding:15px;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.archive-stages-item-infos-title{
    color:white;
    text-transform:uppercase;
    font-weight:bold;
    font-size:20px;
}
.archive-stages-item-infos-meta{
    display:flex;
    gap:8px;
    color:white;
    font-size:13px;
}
.archive-stages-item-infos-meta > div{
    display:flex;
    align-items:center;
    gap:8px;
}



@media screen and (max-width: 1200px) {
    .archive-stages-form{
        --gap-items:15px;    
        --items-per-line:3;      
    }
}

@media screen and (max-width: 768px) {
    .archive-stages-form{
        --gap-items:10px;    
        --items-per-line:2;      
    }
    
    .archive-stages-list{   
        --items-per-line:1;   
    }
}