/* 
	GD Build Customized Home Page Scripts. 
*/
.t-page-sfnt {
	
	/* Featured Clients */
	.t-featured-clients {
		left: 50%;
		position: relative;
		transform: translateX(-50%);
		width: 100cqi;
		
		.t-featured-clients__container {
			padding-block: 1.5rem;
			
			&::after {
				background-color: black;
				content: "";
			}
			
			.t-featured-clients__heading {}
			
			.t-featured-clients__picture-wrapper {
				display: grid;
				gap: 2rem;
				grid-template-columns: repeat(6, clamp(7rem, 5.886rem + 4.571vw, 10rem));
				overflow-x: auto;
				place-content: space-around;
				
				.t-featured-clients__picture {
					align-items: center;
					display: inline-flex;
					
					.t-featured-clients__image {}
				}
			}
		}
	}
	
	
	/* Kits */
	.t-kits {
		background: var(--grid-overlay) repeat-x top left, var(--blue-gradient);
		background-size: 32rem;
		color: var(--white);
		left: 50%;
		padding-block: 4.5rem;
		position: relative;
		transform: translateX(-50%);
		width: 100cqi;
		
		.t-kits__heading {
			font-size: clamp(1.5rem, 0.474rem + 4.211vw, 3rem);
			line-height: 1.15;
		}
		
		.t-kits__content {
			display: grid;
			gap: 2rem;
			
			@media screen and (min-width: 60em) {
				gap: unset;
				grid-template-columns: 25% 1fr;
			}
			
			.t-kits__details {
				.t-kits__details__text {
					margin-bottom: 2rem;
				}
				
				.t-kits__details-actions {
					display: flex;
					gap: 1.5rem;
					
					.t-kits__details-actions-button {
						padding: 0.75em;
						
						&:hover {
							path {
								stroke: var(--white);
							}
						}
						
						svg {
							height: 1.25rem;
							width: 1.25rem;
						}
					}
				}
			}
			
			.t-kits__figure {
				align-items: end;
				display: grid;
				gap: 2rem;
				
				@media screen and (min-width: 60em) {
					grid-template-columns: 1fr 33%;
					gap: clamp(1rem, -5rem + 10vw, 4rem);
				}
				
				.t-kits__figure-container {
					border: var(--default-border-width) solid var(--white);
					border-radius: 50%;
					display: grid;
					grid-template-columns: 1fr;
					transition: transform ease-in-out 0.5s;
				}
				
				.t-kits__steps {
					grid-area: 1 / 1 / auto / auto;
					position: relative;
					
					.t-kits__step {
						--rotate: 0deg;
						align-items: center;
						aspect-ratio: 1;
						border: var(--default-border-width) solid var(--white);
						border-radius: 50%;
						display: flex;
						font-size: 0.7rem;
						justify-content: center;
						position: absolute;
						width: 1.5rem;
						
						&::after {
							aspect-ratio: 1;
							background-color: var(--white);
							border-radius: 50%;
							content: "";
							width: 0.5rem;
						}
						
						&::before {
							content: "0" attr(data-step);
							font-size: var(--paragraph-small);
							position: absolute;
							rotate: var(--rotate);
							transition: rotate ease-in-out 0.3s;
						}
						
						&[data-position="1"]::before {
							left: -1.75rem;
						}
						
						&[data-position="2"]::before {
							top: -1.75rem;
						}
						
						&[data-position="3"]::before {
							right: -1.75rem;
						}
						
						&[data-position="4"]::before {
							bottom: -1.75rem;
						}
						
						&[data-step="1"] {
							inset: 50% -0.75rem auto auto;
						}
						
						&[data-step="2"] {
							inset: -0.75rem auto auto 50%;
						}
						
						&[data-step="3"] {
							inset: 50% auto auto -0.75rem;
						}
						
						&[data-step="4"] {
							inset: auto auto -0.75rem 50%;
						}
						
						&.--is-current {
							font-size: var(--paragraph-large);
							
							&::after {
								scale: 1.75;
							}
						}
					}
				}
				
				.t-kits__picture {
					align-items: center;
					aspect-ratio: 1;
					border-radius: 50%;
					display: flex;
					grid-area: 1 / 1 / auto / auto;
					justify-content: center;
					margin: 3rem;
					overflow: clip;
					z-index: 99;
					transition: opacity 0.2s;
					
					&.--is-hidden {
						opacity: 0;
						transition: opacity 0s;
					}
				}
				
				.t-kits__caption {
					.t-kits__caption-heading {
						font-size: var(--title-two);
					}
					
					.t-kits__caption-content {
						margin-bottom: 2rem;
					}
					
					.t-kits__caption-action {
						gap: 1rem;
						
						span {
							font-size: var(--subheading-small);
							rotate: 45deg;
						}
					}
				}
			}
		}
	}
	
	
	
	
}