/* 關於小青田:五大特色輪播(桌機 5 欄、平板 3 欄、手機 1 欄)與箭頭修正 */

/* 三角箭頭的黑色方塊:CSS 三角形的上下邊框未設透明,預設吃到文字深色。 */
.gsbp-be58695b48228,
.gsbp-35279b8a4ea99 {
	border-top-color: transparent !important;
	border-bottom-color: transparent !important;
	cursor: pointer;
}

/* 以下樣式只在 JS 成功建立輪播結構(容器加上 .cyan-about-carousel)後生效,
   JS 未載入時維持原本 grid 版面 */
.cyan-about-carousel.gsbp-bfe20210149f3 {
	display: block !important;
}

.cyan-about-scroller {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 4 * 28px) / 5); /* 一次顯示 5 張,同原本 5 欄 */
	column-gap: 28px;
	overflow-x: auto;
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
}

.cyan-about-scroller::-webkit-scrollbar {
	display: none;
}

.cyan-about-scroller > div {
	scroll-snap-align: start;
}

/* 平板(690–999.98px):3 張一列,同樣輪播循環。
   Greenshift 在此斷點把兩顆箭頭設成 display:none、容器 padding 壓到 12px,
   兩者都要覆寫回來,否則箭頭消失或壓在卡片上。 */
@media (max-width: 999.98px) {
	.cyan-about-carousel .gsbp-be58695b48228,
	.cyan-about-carousel .gsbp-35279b8a4ea99 {
		display: block !important;
	}

	/* box-sizing 必須明講:Greenshift 這個容器沒宣告，
	   content-box 下左右各 44px 會把容器撐出視窗，造成水平捲動 */
	.cyan-about-carousel.gsbp-bfe20210149f3 {
		box-sizing: border-box !important;
		padding-left: 44px !important;
		padding-right: 44px !important;
	}

	.cyan-about-scroller {
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-auto-columns: calc((100% - 2 * 20px) / 3);
		column-gap: 20px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}
}

/* 手機(≤689.98px):1 張一列。單欄卡片變高,箭頭改垂直置中。 */
@media (max-width: 689.98px) {
	.cyan-about-scroller {
		grid-auto-columns: 100%;
		column-gap: 0;
	}

	.cyan-about-carousel .gsbp-be58695b48228,
	.cyan-about-carousel .gsbp-35279b8a4ea99 {
		top: 50% !important;
		transform: translateY(-50%);
	}
}