.info-page {
	@include infoPage;
	position: relative;

	@media (max-width: $mobile) {
		margin: 0;
		padding: 52px 10px;
	}
}

.info-page__wrapper {
	width: 100%;
}

.info-page__link-back {
	@include btn-reset;
	position: absolute;
	top: 34px;
	left: 36px;
	width: 40px;
	height: 40px;
	color: $text-main;
	transition: color 0.3s ease;

	@media (max-width: $tablet) {
		top: 14px;
		left: 16px;
	}

	@media (max-width: $mobile) {
		top: -1px;
		left: 9px;
		color: $accent-dark;
	}

	&:hover,
	&:focus,
	&:active {
		color: $accent-medium;
		outline: none;
	}
}

.info-page__link-back svg {
	@include center;
	display: block;

	@media (max-width: $mobile) {
		width: 20px;
		height: 17px;
	}
}

.info-page__card {
	margin: 0 auto;
	box-sizing: border-box;
	padding: 0 40px;
	width: 100%;
	max-width: 1080px;

	@media (max-width: $tablet) {
		padding: 0 10px;
	}

	@media (max-width: $mobile) {
		padding: 0;
	}
}

.info-page__headline {
	@include title;
	margin: 0 0 24px;
	text-align: center;

	@media (max-width: $mobile) {
		margin: -29px 0 6px;
		padding-left: 10px;
		text-align: left;
		font-weight: 700;
		font-size: 20px;
		line-height: 25px;
	}
}

.info-page__title {
	@include headline;
	margin: 0 0 20px;
	text-align: center;

	@media (max-width: $mobile) {
		margin-bottom: 7px;
		padding-left: 10px;
		text-align: left;
		font-weight: 500;
		font-size: 16px;
		line-height: 20px;
		letter-spacing: 0.15px;
	}
}

.info-page__inner {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	width: 1000px;
	max-width: 100%;
}

.info-page__categories {
	@include list-reset;
	display: flex;
	flex-wrap: wrap;
	margin: 0 -25px;
	width: calc(100% + 240px);

	@media (max-width: 1509px) {
		align-self: center;
		margin: 0;
		width: 1200px;
	}

	@media (max-width: 1260px) {
		width: 960px;
	}

	@media (max-width: 1030px) {
		width: 720px;
	}

	@media (max-width: 790px) {
		width: 480px;
	}

	@media (max-width: $mobile) {
		align-self: auto;
		margin-left: -10px;
		width: calc(100% + 20px);
	}
}

.info-page__category {
	display: flex;
	flex-direction: column;
	margin: 25px;

	@media (max-width: $mobile) {
		margin: 10px;
	}

	@media (max-width: 359px) {
		width: calc(50% - 20px);
	}
}
