.vacancy-count-title {
font-family: "Montserrat", sans-serif;
font-weight: 700;
font-size: 30px;
line-height: 120%;
color: var(--zagolovok-2);
margin-bottom: 40px !important;
}
.vacancy-list-container {
max-width: 100%;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 120px;
}
.vacancy-group {
padding: 20px 20px 40px 20px;
border-radius: 16px;
display: flex;
justify-content: space-between;
}
.vacancy-group:nth-child(1) {
background: var(--p2);
}
.vacancy-group:nth-child(2) {
background: #4a4a4a;
}
.vacancy-group:nth-child(3) {
background: #6e6e6e;
} .vacancy-group-title {
font-family: "Geologica", sans-serif;
font-weight: 500;
font-size: 18px;
color: var(--p4-zagolovok-1);
max-width: 150px !important;
}
.vacancy-group-content {
display: flex;
flex-direction: column;
gap: 12px;
max-width: 875px !important;
width: 100%;
}
.vacancy-item {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--p4-zagolovok-1);
padding: 16px;
border-radius: 8px;
border: 2px solid transparent;
text-decoration: none;
transition: border 0.3s linear;
width: 100%;
}
.vacancy-title {
font-family: "Geologica", sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 130%;
color: var(--tekst-1);
}
.vacancy-button {
display: flex;
align-items: center;
gap: 4px;
font-family: "Geologica", sans-serif;
font-weight: 300;
font-size: 16px;
line-height: 130%;
text-align: right;
color: var(--p1);
transition: color .3s linear;
}
.vacancy-button svg {
fill: var(--p1);
width: 24px;
height: 24px;
transition: fill .3s linear;
}
.vacancy-item:hover .vacancy-button {
color: var(--hover);
}
.vacancy-item:hover .vacancy-button svg {
fill: var(--hover);
}
.vacancy-item:hover {
border: 2px solid var(--hover);
}
@media (max-width: 1023px) {
.vacancy-count-title {
font-size: 26px;
}
.vacancy-group {
padding: 16px 16px 30px 16px;
}
.vacancy-group-title {
min-width: 23%;
}
.vacancy-group {
gap: 8px;
}
.vacancy-list-container {
gap: 100px;
}
}
@media (max-width: 959px) {}
@media (max-width: 767px) {
.vacancy-count-title {
font-size: 20px;
margin-bottom: 30px !important;
}
.vacancy-group {
padding: 16px;
flex-direction: column;
}
.vacancy-item {
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 10px;
}
.vacancy-button {
align-self: flex-end;
}
.vacancy-list-container {
gap: 40px;
}
}