.vacancies {
	padding: 50px 0;
	@media (min-width: $desktop) {
		padding: 100px 0;
	}
	&__body {
		display: flex;
		flex-direction: column-reverse;
		gap: 20px;
		width: 100%;
		margin-top: 20px;
		@media (min-width: $laptop) {
			margin-top: 30px;
			gap: 30px;
		}
	}
	&__more {
		width: 100%;
		@media (min-width: $tablet) {
			width: auto;
			margin: 0 auto;
		}
	}
	&__list {
		display: flex;
		flex-direction: column;
		gap: 15px;
		@media (min-width: $tablet) {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
		}
		@media (min-width: $laptop) {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 20px;
		}
		@media (min-width: $desktop) {
			grid-template-columns: repeat(4, 1fr);
		}
	}
	&__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),
		&:nth-of-type(9),
		&:nth-of-type(10),
		&:nth-of-type(11),
		&:nth-of-type(12),
		&:nth-of-type(13),
		&:nth-of-type(14),
		&:nth-of-type(15),
		&:nth-of-type(16) {
			display: flex;
		}
		> span {
			border-left: 10px solid $green;
			padding: 20px 14px;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 5px;
			justify-content: space-between;
			@media (min-width: $laptop) {
				gap: 10px;
			}
		}
		b {
			font-weight: 700;
			font-size: 14px;
			@media (min-width: $laptop) {
				font-size: 20px;
			}
		}
		&:hover b {
			color: $green;
		}
		u {
			text-decoration: none;
			font-size: 14px;
			@media (min-width: $laptop) {
				font-size: 18px;
			}
		}
		i {
			font-size: 12px;
			font-style: normal;
			border-bottom: 1px dashed $green;
			@media (min-width: $laptop) {
				font-size: 16px;
			}
			span {
				font-weight: 700;
				color: $green;
			}
		}
	}
	&__body.active > &__list > &__item {
		display: flex;
	}
}