@keyframes scroll {
		0% {
			transform: translateX(0);
		}

		100% {
			transform: translateX(-50%);
		}
	}

	@layer components.page-members {
		[data-c-page-members] {
			color: var(--color-dark-blue);
			padding-top: 50px;
			padding-bottom: 50px;

			@media screen and (max-width: 767px) {
				padding-top: 25px;
				padding-bottom: 0;
			}

			.title {
				font-size: var(--font-size-5xl);
				font-family: var(--font-family-serif);
				font-weight: var(--font-weight-extra-bold);
				line-height: 100%;

				@media screen and (max-width: 1199px) {
					font-size: var(--font-size-4xl);
				}

				@media screen and (max-width: 991px) {
					text-align: center;
				}
			}

			.slider-wrapper {
				overflow: hidden;
				width: 100%;
			}

			.members-grid {
				display: flex;
				gap: 60px;
				animation: scroll 60s linear infinite;
				width: max-content;
				will-change: transform;
				padding: 10px 0 0;

				@media screen and (max-width: 767px) {
					gap: 0;
				}
			}

			[data-c-member-logo] {
				flex-shrink: 0;
				width: 275px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.wrapper {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 1rem 2rem;

				@media screen and (max-width: 767px) {
					padding: 0.75rem 1.75rem;
				}
			}

			.logo {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
			}

			.logo img {
				max-width: 100%;
				height: auto;
				object-fit: contain;
			}
		}
	}