@charset "utf-8";

* {
	box-sizing: border-box;
}

body {
	margin: 0;
}

.flexContainer {
	margin: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.container {
	background-color: #fafafa;
	flex: 1;
}

/* main */
main {
	padding: 16px 16px 64px;
	max-width: 1080px;
	margin: 0 auto;
}

/* title */
main .title p {
	margin: 0;
	color: #666;
	margin-top: 8px;
}

main .title h2 {
	margin: 38px 0 0;
	font-size: 1.8rem;
}


/* breadcrumb */
.breadcrumb ul{
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9rem;
	color: #666;
}

.breadcrumb li {
	display: inline;
}

.breadcrumb li:after {
	content: '>';
	padding: 0 0.2em;
	font-size: 0.7rem;
}

.breadcrumb li:last-child:after {
	content: '';
}

.breadcrumb a {
	text-decoration: none;
	color: inherit;
}

/* articles */
.articles {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 32px;
}

.articles .card {
	display: flex;
	flex-direction: column;
	box-shadow: 0 0 2px rgb(0 0 0 / 0.2);
	border-radius: 10px;
	transition-property: transform;
	transition-duration: 100ms;
	width: 100%;
	color: #222;
}

.articles .card:hover {
	box-shadow: 0 0 2px rgb(0 0 0 / 0.7);
	transform: translateY(-5px);
}

.articles div {
	width: 100%;
}

.articles .pic {
	background-image: url(../asset/bg.png);
	background-repeat: no-repeat;
	text-align: center;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.articles p {
	margin: 0;
}

.articles h3 {
	margin: 0;
}

.articles .pic img {
	vertical-align: bottom;
	height: 100% !important;
	width: 100% !important;
	object-fit: contain;
}

.articles .cardBottom {
	padding: 16px 10px;
	background-color: #fff;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	flex-grow: 1;
}

.articles .cardBottom .cardMeta {
	display: flex;
	gap: 10px;
	font-size: 0.8rem;
	color: #666;
}

.articles .cardBottom .cardText {
	font-size: 0.9rem;
}

.articles .cardBottom .cardText h3 {
	margin-top: 10px;
}

.articles .cardBottom .cardText p {
	margin-top: 10px;
	color: #222;
}

.articles .cardBottom .cardTag {
	display: flex;
	gap: 10px;
	font-size: 0.9rem;
	margin-top: 16px;
	color: #222;
}

.articles .cardTag p {
	border: 1px solid #e5e7eb;
	/* border-radius: calc(1rem + 4px); */
	border-radius: 20px;
	padding: 4px 6px;
}

.articles .cardNav {
	margin-top: 16px;
	color: blue;
}

.articles .cardNav a {
	text-decoration: none;
}

.articles .cardNav a:visited {
	color: inherit;
}

@media (min-width: 590px) {
	.articles .card {
		width: calc((100% - 16px) / 2);
	}
}

@media (min-width: 900px) {
	.articles .card {
		width: calc((100% - 16px * 2) / 3);
	}
}