.recent-work {
	display: block;
	position: relative;
	padding: 1rem 0 1.7rem;

	/* & .card {
		display: block;
		position: relative;

		& .media-frame {
			position: relative;
			aspect-ratio: 670 / 650;
			width: 100%;
			overflow: clip;
			margin-bottom: 0.4rem;

			& .button-frame {
				position: absolute;
				z-index: 2;
				right: 0.3rem;
				bottom: 0.3rem;
			}

			&::after {
				content: "";
				z-index: 1;
				display: block;
				position: absolute;
				transition: opacity var(--dur-fast) var(--ease);
				opacity: 0;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: linear-gradient(
					180deg,
					rgba(255, 90, 0, 0.9) 0%,
					rgba(255, 90, 0, 0.465865) 17.48%,
					rgba(255, 90, 0, 0.206731) 30.51%,
					rgba(255, 90, 0, 0) 61.62%
				);
			}
		}

		& .media {
			position: absolute;
			transition: filter var(--dur-fast) var(--ease);
			top: -20%;
			left: 0;
			width: 100%;
			height: 120%;
			filter: grayscale(0);
		}

		& .cnt {
			position: relative;

			& .tags {
				display: flex;
				align-items: center;
				gap: 0.2rem;
				margin-bottom: 0.2rem;
			}

			& .line {
				display: block;
				width: 0.01rem;
				height: 0.3rem;
				background-color: var(--grey);
			}

			& .tag-l {
				font-size: 0.24rem;
				line-height: 1.2em;
				letter-spacing: -0.02em;
				font-weight: 500;
				padding-right: 0.1rem;
				color: var(--black);
			}

			& .tag {
				color: var(--black);
			}

			& .card-title {
				color: var(--black);
			}
		}

		@media screen and (hover: hover) {
			&:hover {
				& .media-frame {
					&::after {
						opacity: 1;
					}

					& .button-frame {
						transform: scale(1);
						opacity: 1;
					}

					& .media {
						filter: grayscale(0.9);
					}
				}
			}
		}
	} */
}

	.recent-work .title-frame {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-bottom: 0.6rem;
	}

	.recent-work .title-frame .title {
			color: var(--black);
		}

	.recent-work .grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0.2rem;
		row-gap: 1rem;
	}

	.recent-work .mobile-link {
		display: none;
	}

	@media screen and (max-width: 768px) and (orientation: portrait) {.recent-work {
		padding: 0.4rem 0 0.9rem

		/* & .card {
			&:not(:last-child) {
				margin-bottom: 0.6rem;
			}

			& .media-frame {
				aspect-ratio: 335 / 316;
				margin-bottom: 0.1rem;

				& .button-frame {
					display: none;
				}
			}

			& .button {
				width: 100%;
			}

			& .cnt {
				& .tags {
					position: relative;
					justify-content: flex-end;
					gap: 0.14rem;

					& > div:first-child {
						position: absolute;
						transform: translateY(-50%);
						top: 50%;
						left: 0;
						flex-shrink: 0;
					}
				}

				& .line {
					height: 0.2rem;
				}

				& .tag-l {
					font-size: 0.16rem;
					line-height: 0.24rem;
				}

				& .tag {
					font-size: 0.12rem;
					max-width: 0.9rem;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				& .line:nth-child(2) {
					display: none;
				}

				& .card-title {
					margin-bottom: 0.2rem;
				}
			}
		} */
}

		.recent-work .title-frame {
			margin-bottom: 0.3rem;
		}

			.recent-work .title-frame .link {
				display: none;
			}

		.recent-work .grid {
			grid-template-columns: 1fr;
			row-gap: 0.6rem;
		}

		.recent-work .mobile-link {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 0.4rem;
			text-align: center;
			width: 100%;
		}
	}