<div class='card'>
	<div class='card__content'>Hello, Gorgeous!</div>
</div>
<div class='card'>
	<div class='card__content'>Hello, Gorgeous!</div>
</div>
<div class='card'>
	<div class='card__content'>Hello, Gorgeous!</div>
</div>
<div class='card'>
	<div class='card__content'>Hello, Gorgeous!</div>
</div>
<div class='card'>
	<div class='card__content'>Hello, Gorgeous!</div>
</div>
<div class='card'>
	<div class='card__content'>Hello, Gorgeous!</div>
</div>

body, div, ::after { display: grid }

body {
	/* change this value to see how 
	   the card aspect ratio changes, 
	   and conic gradients still meet along the diagonal */
	--ratio: 3/ 1;
	
	display: grid;
	grid-gap: .5rem;
	grid-template-columns: repeat(auto-fit, minmax(Min(100%, calc(2.5em*(1 + var(--ratio)))), 1fr));
	color: #fff;
	font: 900 1.75em/ 1 parisienne, z003, segoe script, comic sans ms, cursive;
	text-align: center;
	text-shadow: 1px 1px 1px #000
}

.card {
	position: relative;
	aspect-ratio: var(--ratio);
	
	&::before {
		position: absolute;
		/* place it behind text content */
		z-index: -1;
		
		/* make card square */
		aspect-ratio: 1/ 1;
		width: 100%;
		
		/* make it scale relative to the top edge it's aligned to */
		transform-origin: 0 0;
		/* give it desired aspect ratio with transforms */
		transform: scaley(calc(1/(var(--ratio))));

		/* set background */
		background: 
			/* below the diagonal */
			conic-gradient(from 45deg at 0 100%, 
					#319197, #af002d, #ff7a18 45deg, transparent 0%), 
			/* above the diagonal */
			conic-gradient(from calc(.5turn + 45deg) at 100% 0, 
					#ff7a18, #af002d, #319197 45deg);
		content: ''
	}
	
	&__content {
		place-content: center;
		padding: 1em
	}
}

/*
Context: created for my Variable Aspect Ratio Card With Conic Gradients Meeting Along the Diagonal (https://css-tricks.com/variable-aspect-ratio-card-with-conic-gradients-meeting-along-the-diagonal/) article on CSS-Tricks.
*/