vedic.container
	.cards_category
		h2.cards_category__name CATEGORY
		- for (var i = 0; i < 22; i++)
			.card
				a.card__link(href="/") 
					h3.card__name Card title example
				.card__features
					img.card__auth_icon(
						src="data:image/svg+xml;utf8,<svg viewBox=\"0 0 384 384\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M192 384c105.863 0 192-86.129 192-192 0-51.328-19.96-99.55-56.207-135.793C291.543 19.961 243.328 0 192 0 86.129 0 0 86.129 0 192c0 51.328 19.96 99.55 56.207 135.793C92.449 364.039 140.672 384 192 384zm0-32c-37.39 0-72.8-12.71-101.297-36.078L315.922 90.703C339.289 119.2 352 154.61 352 192c0 88.223-71.777 160-160 160zm0-320c37.383 0 72.8 12.71 101.29 36.078L68.077 293.297C44.711 264.8 32 229.39 32 192c0-88.223 71.777-160 160-160zm0 0\"/></svg>",
						alt=""
					)
					span.https HTTPS://
					span CORS: YES
				p.card__description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
View Compiled
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap')
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400&display=swap')

*
	margin: 0
	box-sizing: border-box 
.cards_category
	display: flex
	flex-wrap: wrap
	padding: 0 12px
	&__name
		font-family: 'Roboto', sans-serif
		font-weight: 400
		padding: 16px 28px 8px
		flex-basis: 100%
.card
	position: relative
	flex-basis: calc(100%/3 - 24px)
	border-radius: 8px
	border: 1px solid #dadce0
	margin: 12px
	transition: all 0.18s ease
	&__link
		display: block
		padding: 16px 16px 12px
		text-decoration: none
	&__name
		font-family: 'Roboto', sans-serif
		font-weight: 400
		font-size: 16px
		color: #202124
	&:hover,
	&:focus 
		box-shadow: 0 1px 2px 0 rgb(60 64 67 / 30%), 0 2px 6px 2px rgb(60 64 67 / 15%)
		transform: translateY(-1px)
		outline: none
	&:hover &__name 
		text-decoration: underline
	&__features
		padding: 0 16px 4px
		display: grid
		grid-template-columns: 36px 78px auto
		grid-template-rows: auto
		font-family: 'Source Code Pro', monospace
		font-size: 14px
		font-weight: 400
		& .https 
			color: green
	&__auth_icon
		width: 24px
		height: 24px
		transform: translateY(-4px)
	&__description
		padding: 0 16px 14px
		font-family: 'Roboto', sans-serif
		font-size: 14px
		font-weight: 40
	
@media screen and (max-width: 901px) 
	.card 
		flex-basis: calc(100% / 2 - 24px)
	
@media screen and (max-width: 472px) 
	.card 
		flex-basis: calc(100% / 1 - 24px)
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.