/* =========================================
   BackShield.jp
   AI WORKS / PROJECTS
   ========================================= */


/* -------------------------
   TOP PROJECTS GRID
   PC : 3 columns
   ------------------------- */

#projects .posts {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.5em 2em;
	margin: 0 !important;
}

#projects .posts > article {
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

#projects .posts > article::before {
	display: none !important;
}


/* -------------------------
   WHOLE CARD LINK
   ------------------------- */

#projects .project-card-link {
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
	border-bottom: 0;
}

#projects .project-card-link:hover {
	color: inherit;
}

#projects .project-card-link:hover h3 {
	color: #f56a6a;
}


/* -------------------------
   PROJECT IMAGE
   ------------------------- */

#projects .posts .image,
#projects .project-book .image {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0 0 1em 0;
	overflow: hidden;
	border-radius: 0.375em;
	background: #f2f2f2;
}

#projects .posts .image img,
#projects .project-book .image img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: contain;
	transition: transform 0.25s ease;
}

#projects .project-card-link:hover .image img {
	transform: scale(1.025);
}


/* -------------------------
   CATEGORY
   ------------------------- */

#projects .project-category {
	margin: 0 0 0.45em 0;
	font-size: 0.72em;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #9fa3a6;
}


/* -------------------------
   TITLE
   ------------------------- */

#projects .posts h3 {
	margin: 0 0 0.55em 0;
	font-size: 1.05em;
	transition: color 0.2s ease;
}


/* -------------------------
   DESCRIPTION
   ------------------------- */

#projects .project-description {
	margin: 0;
	font-size: 0.88em;
	line-height: 1.65;
	color: #7f888f;
}


/* -------------------------
   BOOK DETAIL PAGE
   ------------------------- */

.book-cover {
	display: block;
	width: 100%;
	max-width: 340px;
	margin: 0 0 2.5em 0;
}

.book-cover img {
	display: block;
	width: 100%;
	height: auto;
}


/* -------------------------
   TABLET
   ------------------------- */

@media screen and (max-width: 980px) {

	#projects .posts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2em 1.5em;
	}

	#projects .posts .image img,
	#projects .project-book .image img {
		height: 200px;
	}

}


/* -------------------------
   SMARTPHONE
   2 columns
   ------------------------- */

@media screen and (max-width: 736px) {

	#projects .posts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.75em 1em;
	}

	#projects .posts .image,
	#projects .project-book .image {
		width: 100%;
		margin: 0 0 0.8em 0;
	}

	#projects .posts .image img,
	#projects .project-book .image img {
		height: 155px;
	}

	#projects .project-category {
		font-size: 0.65em;
	}

	#projects .posts h3 {
		font-size: 0.95em;
		margin-bottom: 0.45em;
	}

	#projects .project-description {
		font-size: 0.78em;
		line-height: 1.55;
	}

	.book-cover {
		width: 68%;
		max-width: 280px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 2em;
	}

}