.padded {
	padding: 5px;
}

.hashtagarticle {
	transition: color 1s, border .2s, background .2s, transform .5s, font-weight .2s;
	display:grid;
	align-content:center;
	justify-content:center;
	}

.hashtagarticle:hover {
	padding:5px;
	font-weight:bold; 
	line-height:100%;
	transform-origin: center;
	transform: scale(1.1);
	background:#1565B3;
	color:white;
	border:1px solid #fff;
	box-shadow: 0 3px 3px #ccc;
	}

.gridarticles {
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(min(400px, 100%),1fr));   /* min(…,100%): never wider than the screen (a fixed 400px overflowed phones) */
	grid-gap: 20px;
	}

.blocarticle {
	display: block;             /* now a turbolink <a>, not a div */
	text-decoration: none;
	color: inherit;
	transform: scale(1);
	transition: transform .2s;
	cursor: pointer;
}

.blocarticle:hover {
	transform: scale(1.02);
	z-index:1;
}

.titrearticle {
	padding:5px;
	font-size:18px;
	align-content:center;
	width: 100%;
	font-weight:bold; 
}

.innerarticle {
	padding-top:20px; padding-bottom:20px; display:grid; grid-template-columns: 180px minmax(0, 1fr);   /* minmax(0,…): the text column may shrink (auto let the hashtag row push the card past the screen) */
}

.imagecontainer {
	justify-self:center; width:160px; height:150px;
}

.imagearticle {
	border-radius:10px; width: 170px; height: 150px; object-fit: cover;
}

.resumehash {
	align-content:center; padding-left: 20px; display:grid; grid-template-rows: 110px 20px;
}

.resume {
	margin-top:10px; color:#777; font-weight:200; font-size:13px; padding-right:10px;
}

.hashs {
	display:flex; flex-wrap:wrap; gap:6px; font-size:12px; color:#1565B3;
}

.infosarticle {
	padding-top:3px; display:flex; gap:6px; font-size:12px; color:#334; justify-content: space-around;
}