.vacancies {
	padding: 50px 0;
	@media (min-width: $desktop) {
		padding: 100px 0;
	}
	&__body {
		display: flex;
		flex-direction: column-reverse;
		gap: 20px;
		margin-top: 20px;
		@media (min-width: $laptop) {
			margin-top: 30px;
			gap: 30px;
		}
	}
	&__more {
		width: 100%;
		height: 38px;
		@media (min-width: $laptop) {
			width: 250px;
			margin: 0 auto;
			height: 44px;
		}
	}
	&__body.active > &__more {
		display: none;
	}
	&__list {
		display: flex;
		flex-direction: column;
		gap: 15px;
		@media (min-width: $tablet) {
			display: grid;
			grid-template-columns: 1fr 1fr;
		}
		@media (min-width: $laptop) {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
			gap: 20px;
		}
	}
	&__item {
		display: none;
		box-shadow: $shadow;
		border-radius: 12px;
		background: $white;
		border: 1px solid #e6e7e7;
		overflow: hidden;
		&:nth-of-type(1),
		&:nth-of-type(2),
		&:nth-of-type(3),
		&:nth-of-type(4),
		&:nth-of-type(5),
		&:nth-of-type(6),
		&:nth-of-type(7),
		&:nth-of-type(8) {
			display: flex;
		}
		> span {
			border-left: 10px solid $green;
			padding: 20px 14px;
			display: flex;
			flex-direction: column;
			gap: 5px;
			justify-content: space-between;
		}
		b {
			font-weight: 700;
			font-size: 14px;
			@media (min-width: $laptop) {
				font-size: 20px;
			}
		}
		&:hover b {
			color: $green;
		}
		i {
			font-size: 12px;
			font-style: normal;
			@media (min-width: $laptop) {
				font-size: 16px;
			}
			span {
				font-weight: 700;
				color: $green;
			}
		}
	}
	&__body.active > &__list > &__item {
		display: flex;
	}
}