#serves {
	& > .serves-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: 2rem;
		& > .serves-grid-item {
			padding: 1.5rem;
			border-radius: 1rem;
			display: flex;
			flex-direction: column;
			gap: 1rem;
			position: relative;
			& .serves-grid-item-header {
				display: flex;
				gap: 3rem;
				& > .serves-grid-item-header-title {
					font-size: 1.5rem;
					font-weight: bold;
					color: var(--color-text_high);
				}
				& > .serves-grid-item-header-list {
					& > .serves-grid-item-header-list-item {
						& > img {
						}
					}
				}
			}
			& > .serves-grid-item-image {
				width: 100%;
				height: auto;
				aspect-ratio: 16/9;
				border-radius: 0.5rem;
				overflow: hidden;
				& > img {
					width: 100%;
					height: 100%;
					object-fit: cover;
					transition: transform 0.3s linear;
				}
			}
			& > .serves-grid-item-description {
				font-size: 1rem;
				color: var(--color-text_medium);
				line-height: 1.5;
				word-spacing: 0.1em;
			}
		}
	}
}
/*--------------------animation effect---------------------*/