.collection-tab {
	/*==============================*/
	/*=====----- TEMPLATE -----=====*/
	/*==============================*/

	color: var(--black);

	.header-content {
		display: none;
	}

	.tab-button {
		display: flex;
		align-items: baseline;
		gap: var(--space-1);
		width: 100%;
		padding: 0;
		margin: 0;
		font-family: var(--font-display);
		font-weight: var(--font-weight-normal);
		font-size: var(--text-lg);
		line-height: 1.15;
		text-align: left;
		color: rgba(0, 0, 0, 0.35);
		background: none;
		border: none;
		border-radius: 0;
		transition: color var(--transition-appendix);

		&::before {
			font: var(--fa-font-solid);
			color: var(--black);
			content: '\f107';
			transition: rotate var(--transition-appendix);
		}
	}

	.template-title {
		margin: 0;
		font: inherit;
		color: inherit;
	}

	.template-desc {
		margin: var(--space-2) 0 0;
		font-family: var(--font-body);
		font-weight: var(--font-weight-normal);
		font-size: 0.9375rem;
		line-height: 1.4;
		color: inherit;
	}

	.view-all {
		margin-top: var(--space-4);
	}

	.slides {
		display: none;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px var(--space-5);
		margin-top: var(--space-5);
	}

	/*----- active tab -----*/

	&.active {
		.tab-button {
			color: inherit;
	
			&::before {
				rotate: x 180deg;
			}
		}

		.header-content {
			display: block;
		}

		.slides {
			display: grid;
		}
	}

	/*============================*/
	/*=====----- SLIDES -----=====*/
	/*============================*/

	.slide,
	.slide-top,
	.img-cont,
	.slide-title {
		position: relative;
	}

	.slide {
		overflow: hidden;
	}

	.slide-inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
	}

	.slide-img {
		width: 100%;
	}

	.slide-title {
		z-index: 3;
		order: 1;
		max-width: max-content;
		padding: 10px var(--space-3) 7px;
		margin: -20px 0 0;
		font-family: var(--font-display);
		font-weight: var(--font-weight-normal);
		font-size: var(--text-xs);
		line-height: 1.15;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: inherit;
		background: var(--white);
	}

	/*----- large slide -----*/

	.slide.large {
		grid-column: span 2;
	}

	/*----- small slides -----*/

	.slide.small .mini-date-section {
		--month-size: var(--text-xs);
		--day-size: var(--text-3xl);
	}

	/*===================================*/
	/*=====----- MEDIA QUERIES -----=====*/
	/*===================================*/

	@media (hover: hover) {
		.tab-button:hover {
			color: var(--black);
		}
	}

	@media (min-width: 64em) {
		.template-header {
			max-width: 273px;
		}

		.tab-button {
			display: block;
			font-size: var(--text-2xl);

			&::before {
				display: none;
			}
		}

		.template-desc {
			margin-top: var(--space-4);
			font-size: var(--text-base);
		}
		
		.view-all {
			margin-top: 22px;
		}

		.slides {
			position: absolute;
			inset: 0 var(--space-5) auto 380px;
			gap: 10px var(--space-2);
			margin: 0;
		}

		.slide {
			padding-bottom: var(--space-5);
		}

		.slide-title {
			position: absolute;
			inset: auto auto 0 0;
			width: 100%;
			padding: var(--space-3) 14px 9px;
			margin: 0;
			font-size: var(--text-base);
		}

		.slide.small .mini-date-section {
			--month-size: var(--text-sm);
			--day-size: 3.125rem;
		}
	}
}