style.css

/* General */
    .Articles > ul { margin: 0px; padding: 4%; display: flex; box-sizing: border-box; flex-basis: auto; flex-grow: 1;  flex-wrap: wrap}
    .Articles > ul > li { margin: 10px; min-width: 300px; background: #fff; box-shadow: 0px 1px 1px rgba(0,0,0,0.25); display: block; position: relative; flex: 1; } 
/* Fonts */
    @import url('https://fonts.googleapis.com/css2?family=EB+Garamond&display=swap');
/* Content */
    /* Picture */
        .Articles > ul > li > picture:after{ color: #fff; background:rgba(0, 0, 0, 0.4); border-radius: .4em .4em ; font-size:.7em; line-height: 1rem; white-space: nowrap; padding:0rem 0.9rem ; line-height: 1.65rem; position:absolute; left:1rem; top:1rem; font-weight: 100; height: 1.7rem; content:attr(title); display:block; -webkit-border-radius: .4em .4em ; -moz-border-radius: .4em .4em ; -ms-border-radius: .4em .4em ; -o-border-radius: .4em .4em ; }
        .Articles > ul > li > picture > img{ width: 100%;}
    /* Titles */
        .Articles > ul > li > h3{font-family: 'EB Garamond', serif;  margin: 1rem 0 0.5rem 1.5rem; font-weight: 400; font-size: 1.5em; } 
        .Articles > ul > li > strong{ font-weight: normal;  margin: 0rem 0 0.5rem 1.5rem; color: #aaa; font-size: 1em; } 
    /* Description */
        .Articles > ul > li > p{ font-weight: normal;  margin: 1rem 1.5rem 1rem; color: rgb(84, 84, 84); font-size: .8em; line-height: 1.5em; } 
    /* Link */
        .Articles > ul > li > a{ float: right; color: #000; text-decoration: none; padding: 1em 2em;margin-bottom: 1em; } 
/* Responsive */
    @media only screen and (max-width:500px) {
        .Articles > ul{ display: block;}
        .Articles > ul > li{ overflow: hidden; min-width: 0px;}
    }
/* Fonts */
    @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');
    .Articles { font-family: 'Open Sans', sans-serif; }