@media screen and (min-width: 800px) {
	.examples {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media screen and (max-width: 801px) {
	.examples {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
}

.examples {
	display: grid;
	gap: 32px;

	a {
		display: block;
		background: #fff;
		box-shadow: 0 1px 4px rgb(0 0 0 / 0.3);
		text-decoration: none;

		&:hover {
			opacity: .7;
			background-color: #fff;
		}

		/* fa-external-link アイコンのキャンセル */
		&::after {
			display: none;
		}

		img {
			width: 100%;
		}

		p:nth-of-type(1) {
			display: block;
			overflow: hidden;
			text-overflow: ellipsis;
			text-wrap: nowrap;
			font-weight: bold;
			margin: 0 8px;
		}

		p:nth-of-type(2) {
			display: -webkit-box;
			overflow: hidden;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			margin: 8px;
			line-height: 1.2em;
			height: calc(1.2em * 3);
		}
	}
}