.article {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    border-radius: 6px;
    scroll-snap-align: center;
    width: max(min(400px,80vw),30%);
    background-color: var(--clwhite);
}
.article picture {
    position: relative;
    height: auto;
    display: block;
    aspect-ratio: 2/1;
}
.article picture img {transition: all .5s;}
.article:hover picture img {filter: brightness(0.8);scale: 1.02;}
.article picture .flex {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: min(15px,5vw);
}
.article .text {padding: min(25px,5vw);}
.article .text h6 {font-weight: 500;}
.article .text > div {
    position: relative;
    display: flex;
    font-weight: 500;
    align-items: flex-end;
    font-size: min(12px,3.7vw);
    justify-content: space-between;
}
.article .text > div span {
    text-decoration: underline;
    color: var(--cLturquoiseBlue);
}