.vacancies-list {
    padding: 20px 20px 46px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 833px;
    margin-inline: auto;
}

.vacancies-container {
    display: grid;
    gap: 20px;
    width: 100%;
}

.vacancies-card {
    background-color: var(--lighter-grey);
    border-radius: 6px;
    padding: 20px;
    display: grid;
    gap: 20px;
    transition:  box-shadow .3s ease-in-out;
}

.vacancies-card:hover{
    text-decoration: none;
    box-shadow: 0 0 3px rgba(0,0,0,0.16);
}

.vacancies-card-content {
    display: grid;
    gap: 20px;
    align-content: space-between;
}

.vacancies-card img {
    aspect-ratio: 348 / 200;
    width: 100%;
    object-fit: cover;
    border-radius: 6px;
}

.vacancies-card-wrapper {
    display: grid;
    gap: 10px;
    max-width: 420px;
}

.pagination {
    display: flex;
    justify-content: center;
}

label.button-filter{
    cursor: pointer;
}

label.button-filter:has(input[type="radio"]:checked) {
    background-color: var(--green) !important;
    color: var(--white);
}

@media (min-width: 1024px) {
    .vacancies-list {
        padding-inline: 0;
        padding-top: 60px;
        padding-bottom: 80px;
    }

    .vacancies-card {
        gap: 24px;
        grid-template-columns: 293px auto;
    }

    .vacancies-card img {
        aspect-ratio: 293 / 200;
    }
}