.article {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(calc(var(--container) / 9), 1fr));
	gap: var(--gap);
	margin-block: var(--gap);
	
	&.article-2 {
		grid-template-columns: repeat(auto-fit, minmax(calc(var(--container) / 5), 1fr));
	}
	&.article-3 {
		grid-template-columns: repeat(auto-fit, minmax(calc(var(--container) / 7), 1fr));
	}
	
	* {
		transition: all .5s ease-in-out;
	}
	
	> * {	
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 6;
		gap: .25em;
		overflow: clip;
		
		.btn {
			display: block;
		}
	
		figure {
			aspect-ratio: 1;
			overflow: clip;
			
			a {
				display: block;
				aspect-ratio: 1;
				overflow: clip;	
			}

			img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center;
				&:hover {
					transform: scale(1.1);
				}
			}
		}

		p {
			font-size: .75em;
		}
		
		s {
			font-size: .9em;
			color: #888;
		}

		> *:not(figure):not(a) {
			hyphens: auto;
			text-wrap: balance;
			/*margin: 0 calc(var(--gap) / 2);*/
		}
		
	}
}