.slider.alignfull.has-background
{
	padding: 0;
	overflow: hidden;

	display: grid;
}

.slider.alignfull:where(:has(+ .has-background:not(.alignfull)))
{
	margin-bottom: 20px;
}

.slider .slides
{
	display: grid;
	grid-row: 1;
	grid-column: 1;
}

.slider .dots
{
	display: none;
}


.slider .slide
{
	display: grid;
	grid-row: 1;
	grid-column: 1;
	position: relative;

	transform: translateX(100%);
	grid-template-rows: var(--wp--custom--v-pad) auto;
}

.slider .slide.current
{
	z-index: 1;
	transform: translateX(0);
}

.slider .slide.going
{
	transition: transform 0.5s ease-in-out;
	z-index: 2;
}

.slider .background
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	grid-row: 1/-1;
	grid-column: 1/-1;
}

.slider .content
{
	padding: 30px var(--wp--custom--h-inset);
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr auto;
	align-items: center;

	grid-row: 2;
	grid-column: 1;
	align-self: end;
}

.slider .text
{
	text-transform: uppercase;
	font-weight: 600;
	line-height: 1;
}

@media (min-width: 450px)
{
	.slider .text
	{
		font-size: var(--wp--preset--font-size--thirty);
	}
}

@media (min-width: 768px)
{
	.slider:has(+ .has-background:not(.alignfull))
	{
		margin-bottom: calc(-4 * var(--wp--custom--v-pad))
	}

	.slider + .has-background:not(.alignfull)
	{
		z-index: 2;
		position: relative
	}

	.slider .dots
	{
		grid-row: 1;
		grid-column: 1;
		justify-self: end;
		align-self: center;
		z-index: 3;

		display: grid;
		gap: 15px;
		margin-right: 40px;
	}

	.slider .slideDot
	{
		width: 23px;
		height: 23px;
		border: 1px solid #fff;
		border-radius: 50%;

		background: #fff0;
		padding: 0;
		cursor: pointer;
	}

	.slider .slideDot.current
	{
		background: #fff;
	}

	.slider .slide
	{
		grid-template-columns: var(--wp--custom--h-inset) 1fr var(--wp--custom--h-inset);
		grid-template-rows: 40px 1fr 40px;
		transform: translateY(-100%);
	}

	.slider .slide.current
	{
		transform: translateY(0);
	}

	.slider:has(+ .has-background) .slide
	{
		grid-template-rows: 40px 1fr calc(40px + var(--wp--custom--v-pad));
	}

	.slider .content
	{
		width: 50%;
		padding: 50px 60px;
		grid-column: 2;
		align-self: center;
		justify-self: var(--j);
		display: block;
	}

	.slider .link
	{
		margin-top: 45px;
		display: inline-block;
	}
}

@media (min-width: 1050px)
{
	.slider .text
	{
		font-size: var(--wp--preset--font-size--heading);
	}
}

@media (hover: hover)
{
	.slider .slideDot:not(.current):hover
	{
		background: var(--wp--preset--color--blue);
	}
}