.image-gallery-section {
	--section-mobile-padding: 20px;
	--card-group-padding: 20px;
	--card-group-gap: 10px;
	background-color: rgb(var(--color-background));
}

.image-gallery-section .qd-button {
	padding: 0;
	width: min-content;
	display: flex;
}

.image-gallery-section .qd-divider-block {
	margin-bottom: 16px;
}

.image-gallery__heading-line {
	flex: 1;
	height: 1px;
	background-color: #ccc;
	max-width: 80px;
}

.align-left {
	text-align: left;
}

.align-center {
	text-align: center;
}

.align-right {
	text-align: right;
}

.flex-left {
	justify-content: left;
}

.flex-center {
	justify-content: center;
}

.flex-right {
	justify-content: right;
}

.image-gallery-section .qd-button span {
	margin-right: 4px;
}

.image-gallery__heading .qd-button span {
	display: none;
}

.image-gallery-section .page-width {
	overflow: hidden;
}

.image-gallery--full-width {
	width: 100%;
}

.image-gallery__heading-wrapper {
	width: 100%;
	margin-bottom: 16px;
	display: flex;
	position: relative;
}

.image-gallery__heading {
	display: flex;
	flex-direction: column;
	font-family: "Neutraface Text Book", "sans-serif";
  /* width:min-content; */
}

.image-gallery__divider {
	height: 1px;
	margin-top: 30px;
	background-color: rgba(var(--color-entry-line), 1);
}

.image-gallery__heading-title {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 1;
	word-break: normal;
	white-space: nowrap;
	-webkit-box-orient: vertical;
	font-weight: 400;
	font-size: 20px;
}

.image-gallery__heading-subtitle {
	font-weight: 400;
	font-size: 16px;
	margin-top:2px;
}

.image-gallery__heading-link {
	display: flex;
	column-gap: 8px;
	align-items: center;
	justify-content: center;
	font-size: var(--body1-font-size);
	color: rgb(var(--color-text));
	text-align: var(--card-group-content-align);
}

.image-gallery__heading-link-text {
	display: inline-flex;
}

.image-gallery__heading-link-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
}

.image-gallery__card-group-scroll {
	position: relative;
	inset-inline-start: calc(var(--card-group-padding) * -1);
	width: calc(100% + var(--card-group-padding) * 2);
	margin-inline-end: auto;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--card-group-padding);
	scrollbar-width: none;
	scroll-behavior: smooth;
}

.image-gallery__card-group {
	grid-template-columns: repeat( 
      min(var(--mobile-columns), var(--card-count)),
      minmax(0, calc((100% - (min(var(--mobile-columns), var(--card-count)) - 1) * var(--card-group-gap)) / min(var(--mobile-columns), var(--card-count))))
    );
	display: grid;
	gap: var(--card-group-gap);
	margin: 0 var(--card-group-padding);
	grid-auto-flow: row;
}

.image-gallery__divider {
	margin-top: 24px;
}

.image-gallery__card-link .button--link {
	display: block;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 16px;
	font-weight: 600
}

.image-gallery__card {
	display: flex;
	flex-direction: column;
	gap: 16px;
	text-align: var(--card-group-content-align);
}

.image-gallery__card-image {
	display: flex;
	align-items: center;
	justify-content: center;
	order: 1;
}

.image-gallery__card-image img {
	width: 100%;
	height: auto;
	aspect-ratio: var(--card-group-image-aspect-ratio);
	object-fit: cover;
	border-radius: var(--card-group-image-border-radius);
}

.image-gallery__card-image .empty-image-class {
	display: block;
	width: 100%;
	height: 100%;
	background-color: rgb(var(--color-image-background));
}

.image-gallery__card-title {
	order: 2;
	margin-block-start: 5px;
	font-style: italic;
}

.image-gallery__card-text {
	order: 3;
}

.image-gallery__card-link {
	display: flex;
	align-items: center;
	order: 4;
}

.image-gallery__card-link .button--link {
	column-gap: 4px;
	text-decoration: none !important;
}

.image-gallery__card-link-icon {
	display: inline-flex;
}

.image-gallery__card-link-icon > svg {
	width: 10px;
	height: 10px;
}

.image-gallery__card-link-icon > svg path {
	stroke: rgb(var(--color-text));
}

.image-gallery__card-link a.button {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	text-decoration: none;
	padding: 0;
	background: none;
	border: none;
}

.button-text {
	display: inline-block;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.image-gallery__card-link-icon {
	flex-shrink: 0;
	margin-left: 4px;
	display: inline-flex;
}

/* 下划线样式 */
.button--underline .button-text {
	text-decoration: underline;
	color: #007aff;
}

/* 纯文字样式 */
.button--text .button-text {
	color: #333;
}

.image-gallery__heading-wrapper.flex-center + div .qd-divider-block {
	display: none;
}



/* Tablet - 768px ~ 991px */
@media (min-width: 768px) {
	.image-gallery__card-link .button--link {
		font-size: 18px;
	}

	.image-gallery__heading-wrapper {
		margin-bottom: 20px;
	}

	.image-gallery__heading-title {
		font-size: 30px;
	}

	.image-gallery__heading-subtitle {
		font-size: 18px;
		margin-top:4px;
	}

	.image-gallery__card-group .qd-divider-block {
		margin-bottom: 20px;
	}
}

/* PC - 992px及以上 */
@media (min-width: 992px) {
	.image-gallery__heading-subtitle {
		font-size: 20px;
		margin-top:8px;
	}

	.image-gallery__heading-wrapper {
		margin-bottom: 30px;
	}

	.image-gallery__card .qd-text:first-of-type {
		margin-top: 4px;
	}

	.image-gallery__heading-title {
		font-size: 30px;
	}

	.image-gallery__heading .qd-button span {
		display: block;
	}

	.image-gallery__card-group-scroll {
		width: 100%;
		inset-inline-start: auto;
		margin: 0 auto;
	}

	.image-gallery__heading-link-text {
		display: none;
	}

	.image-gallery__card-group {
		grid-template-columns: repeat( 
      min(var(--desktop-columns), var(--card-count)),
      minmax(0, calc((100% - (min(var(--desktop-columns), var(--card-count)) - 1) * var(--card-group-gap)) / min(var(--desktop-columns), var(--card-count))))
    );
		grid-auto-flow: row;
		gap: 20px;
		padding: 0;
		transform: none;
	}

	.image-gallery__card-group .qd-divider-block {
		margin-bottom: 30px;
	}
}