:root{
		--yandex-rating-color: rgba(50, 186, 67, 1);
        --yandex-color-dark: rgba(101, 101, 101, 1);
	}
.home-intro{
	display: flex;
	justify-content: center;
	gap: 1rem;
	
	h1{
		margin-top: auto;
  		margin-bottom: 0;
	}
	& .car{
		position: relative;
	}
	& .body {
		position: relative;
	  	max-width: 150px;
		animation: carRide 1.2s ease-in-out infinite;
	}
	& .wheel1{
		position: absolute;
		bottom: -1rem;
		left: 5%;
		z-index: 1;
		animation: wheelSpin 0.8s linear infinite;
	}
	& .wheel2{
		position: absolute;
		bottom: -1rem;
		right: 5%;
		z-index: 1;
		animation: wheelSpin 0.8s linear infinite;
	}
    @media (max-width: 768px) {
        &{
            flex-wrap: wrap;
            align-items: center;
            & .car{
                order: 1;
            }
            & .yandex-rating{
                flex: 0 0 auto;
                order: 2;
            }
            & h1{
                flex:1 1 100%;
                order:3;
                text-align: center;
            }
        }
	}
}

@keyframes wheelSpin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@keyframes carRide {
	0% {
		transform: translateY(-5%) rotate(0deg);
	}
	25% {
		transform: translateY(-8%) rotate(-1deg);
	}
	50% {
		transform: translateY(-10%) rotate(0deg);
	}
	75% {
		transform: translateY(-8%) rotate(1deg);
	}
	100% {
		transform: translateY(-5%) rotate(0deg);
	}
}
.yandex-rating{
    display: flex;
    align-items: flex-start;
    gap: 1rem;
	& .rating{
		background: var(--yandex-rating-color);
        padding: 0.5rem;
        border-radius: 0.5rem;
        color:var(--white);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
	& .rating-text{
		font-weight: 600;
		font-size: 12px;
		line-height: 1.4;
		letter-spacing: 0%;
		vertical-align: middle;
        color:var(--yandex-color-dark);
        text-align: left;
	}
}