@layer components {
    .find-service-section{
        --color-text: var(--color-white);
		--color-link: var(--color-white);
		--color-link-hover: var(--color-white);
		--color-link-active: var(--color-white);
		--color-link-visited: var(--color-white);

        container: content / inline-size;
        padding-block: calc(var(--spacer) * 7.875);
        background-image: url(/images/truck-parts-pattern.jpg);
        background-size: cover;

        form{
            > div{
                display: flex;
                justify-content: center;
            }
        }

        label{
            height: 0;
            overflow: hidden;
            visibility: hidden;
        }

        [type="text"]{
            padding: var(--spacer);
			font-family: var(--font-family-content);
			font-size: 1em;
			background-color: rgb(var(--color-white));
			border: 1px solid rgba(var(--color-md-gray));
            border-right: none;
			font-weight: 500;
            width: 100%;
            max-width: 280px;
        }
    }
}