/* components/_hero.css */



.c-hero {
	display: grid;
	grid-template-columns: 1fr;
}
	.c-hero__logo img {
		height: clamp( 50px, 6vw, 60px );
	}

	.c-hero__subproduct {
		background-color: transparent;
		color: var(--color-accent);
		font-weight: normal;
		padding: 4px 8px;
		width: fit-content;
		font-size: calc(1rem * 12 / 16);
		border: 1px solid var(--color-accent);
	}

	.bg_landing {
		--bg-image: url('../../web-img/assets/bg-acr.svg'); 
		background-image: var(--bg-image);
		background-size: cover;
		background-position: center;
		
	}
@media ( min-width: 600px ) {
	.c-hero__subproduct {
		font-size: 1rem;
		padding: 6px 12px;
	}
}

	.c-hero__eidas {
		max-height: 80px;
		order: 1;
		justify-self: center;
	}

	.c-hero__intro {
		align-self: center;
	}
		.c-hero__intro__title {
			max-width: 25ch;
		}

		.c-hero__intro__appstoreslogo {
			height: clamp( 36px, 8vw, 50px);
		}

	.c-hero__clients {
		--gap-clients-logos: clamp( 30px, 8vw, 100px );
		gap: var(--gap-clients-logos);
		display: grid;
		list-style: none;
		padding-left: 0;
		grid-template-columns: repeat(auto-fit, minmax(90px,1fr));
	}
		.c-hero__clients > li > img {
			width: 100%;
		}

	@media ( min-width: 600px ) {
		.c-hero {
			grid-template-columns: repeat( auto-fit, minmax(min(50vw,580px), 1fr) );
		}
			.c-hero__eidas {
				order: initial;
				justify-self: end;
			}
			.c-hero__clients {
				grid-column-start: 1;
				grid-column-end: 3;
			}
	}