/* GP | Start - Стили для мобильных устройств  */
@media screen and (max-width: 576px) {
	/* Start - Header */
	.header__logo p {
		font-size: 14px;
	}
	
	/* Start - Hero block */
	.hero::after{
		width: 90vw;
		height: 100vh;
	}

	.hero__content {
		display: grid;
		grid-template-areas:
			"a"
			"c"
			"b";
	}
	.hero__content::after {
		right: -320px;
		top: 290px;
	}
	



	.hero__leftside {
		gap: 18px;
	}

	.hero__rightside {
		width: 100%;
	}


	.hero__advantages {
		margin-top: 0;
	}

	.hero__price {
		margin-top: 24px;
	}

	.hero__title h1 {
		font-size: 3em;
		text-align: center;
	}

	.hero__title p {
		font-size: 2em;
		line-height: 160%;
		text-align: center;
	}

	.hero__title p>span {
		font-size: 1em;
	}

	

	.hero__desc {
		gap: 6px;
	}

	.hero__desc p {
		font-size: 13px;
		padding: 8px 12px;
		border-radius: 10px;
	}

	.hero__desc img {
		width: 24px;
		height: 24px;
	}

	


	/* Start - Footer */
	.footer__logo{
		flex-direction: row;
	}
	/* End - Footer */
}

/* GP | End - Стили для мобильных устройств*/

/* от верстальщика перенести вверх потом */
@media screen and (max-width: 540px) {
	.header__container {
		align-items: flex-start;
		gap: 24px;
		padding-bottom: 20px;
		top: 20px;
	}
	.header__container::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 24px;
		width: calc(100% - 48px);
		height: 1px;
		background: #e7e7e7;
	}
	
	.header__socials {
		gap: 6px;
	}
	.header__contacts {
		flex-wrap: wrap;
		width: 100%;
		justify-content: flex-end;
		gap: 6px;
	}
	.header__contacts .header__tel {
	}
	.header__tel {
		font-size: 20px;
		margin: 0;
	}
	.hero {
		padding-top: 110px;
	}
}
@media screen and (max-width: 470px) {
	h1 {
		font-size: 39px;
		text-align: left;
	}
	h1 span {
		font-size: 32px;
		padding-left: 12px;
		padding-right: 12px;
		border-radius: 10px;
		margin-top: 6px;
	}
	.hero__price {
		margin-top: 12px;
	}
	.hero__content {
		gap: 34px;
	}
	.hero__content::after {
		opacity: 0.6;
		right: -125px;
		width: 200px;
		height: 140px;
		background-size: contain;
		top: 10px;
	}
	.hero::before {
		opacity: 0.4;
	}
	.hero__form-gift {
		overflow: hidden;
	}
	.hero__form-gift::after {
		right: -10%;
		opacity: 0.6;
	}
	.hero__advantages {
		grid-template-columns: 1fr;
		gap: 6px;
	}
	.hero__price {
		border-radius: 12px;
		padding: 10px;
		padding-bottom: 14px;
	}
	.hero__price-header {
		gap: 10px;
		padding: 10px;
		padding-bottom: 0;
		border-radius: 10px;
		margin-bottom: 0;
	}
	.hero__price-header p {
		font-size: 13.5px;
	}
	.hero__price-header span {
		border-radius: 10px;
		border: none;
		padding-left: 2px;
		padding-right: 2px;
		gap: 7px;
	}
	.hero__price-header span::before {
		min-width: 18px;
		width: 18px;
		height: 18px;
	}
	.hero__price-stock p {
		font-size: 20px;
	}
	.hero__price-stock span {
		font-size: 15px;
	}
	.hero__price-unit {
		border-radius: 8px;
		padding: 6px 12px;
	}
	.hero__price-unit p {
		font-size: 13px;
	}
	.hero__price-content {
		gap: 10px;
	}
	.header__logo {
		width: 100%;
	}
	.header__container {
		align-items: center;
	}
	.header__tel {
		font-size: 18px;
	}
	.hero__form {
		gap: 20px;
		padding: 0 0 20px 0;
		border-radius: 16px;
	}
	.hero__form-title p {
		font-size: 15px;
	}
}
@media screen and (max-width: 390px) {
	h1 {
		font-size: 36px;
	}
	h1 span {
		font-size: 29px;
	}
	.header__logo img {
		width: 42px;
	}
	.header__logo p {
		font-size: 9px;
	}
	.header__tel {
		font-size: 17px;
	}
	.hero__form-action select,
	.hero__form-action input {
		height: 60px;
		border-radius: 12px;
	}
	.hero__price-header p {
		font-size: 12px;
	}
	.hero__content::after {
		right: -140px;
	}
}
@media screen and (max-width: 375px) {
	*[class*='__container'] {
		padding-left: 12px;
		padding-right: 12px;
	}
	.header__container {
		gap: 0;
	}
	h1 {
		font-size: 34px;
	}
	.hero__desc::before {
		display: none;
	}
	.header__logo img {
		width: 39px;
	}
	.header__tel {
		font-size: 16.5px;
	}
	.hero__form-action select,
	.hero__form-action input {
		font-size: 13.5px;
	}
}
@media screen and (max-width: 360px) {
	.hero__desc {
		flex-direction: column;
		align-items: flex-start;
	}
	.hero__price-header span {
		padding-left: 20px;
		padding-right: 20px;
		gap: 12px;
	}
	.hero__content {
		gap: 20px;
	}
	.hero__price-header span::before {
		min-width: 20px;
		width: 20px;
		height: 20px;
	}
}