abdullahtarawneh.com/assets/scss/base/list.scss

.list {
	.container {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(240px,1fr));
		gap: 3em;
	}
	.list-item {
		color: inherit;
		text-decoration: none;
		transition: color 0.2s ease-in-out;
		&__link {
			display: block;
			&:focus {
				background: unset;
				padding: unset;
				@include focus-outline;
				&:link {
					color: var(--link-color);
				}
				&:visited {
					color: var(--link-visited);
				}
			}
			
			&:hover {
			}
			
			&:active {
			
			}
		}
		&__image {
			width: 100%;
			height: auto;
		}
		&__title {
			font-size: 1.5em;
			font-weight: 700;
			margin: 1.5em 0 0.5em;
		}
		&__summary {
			margin-bottom: 0.5em;
			line-height: 1.4;
		}
		&__date {
			display: block;
			margin-bottom: 1em;
		}
	}
}