.ct-articles {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: min(2rem,5vw) 2%;
}
.news {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    row-gap: min(20px,5vw);
    flex-direction: column;
    font-size: var(--fs16);
    width: min(330px,80vw);
    scroll-snap-align: center;
    background-color: var(--cLWhite);
}
.news picture {
    position: relative;
    width: 100%;
    height: min(330px,80vw);
    border-radius: min(10px,3vw);
}
.news:hover picture > img {scale: 1.02;}
.news picture time {
    position: absolute;
    z-index: 2;
    left: 1rem;
    bottom: 1rem;
    font-style: normal;
    border-radius: 1rem;
    color: currentColor;
    padding: 0.1rem 0.7rem;
    font-size: min(13px,3.7vw);
    background-color: var(--cLPeachSoft);
}
.news [class^=text] {row-gap: min(10px,2vw);}
section[class*="bg-"] .news [class^=text] {padding: 0 min(2rem,5vw) min(2rem,5vw);}
.news .ttl-19 {
    font-weight: 700;
    transition: all .4s;
    font-size: var(--fs18);
    text-transform: uppercase;
}
.news:not(:hover) .ttl-19 {color: inherit;}
.news [class^="btn-"] {
    opacity: 0;
    visibility: hidden;
}
.news:hover [class^="btn-"] {
    opacity: 1;
    visibility: visible;
}
@media screen and (min-width:1200px) {
   .news {width: 32%;}
}