.hiring-guide__container {
    padding: 0;
    font-family: sans-serif;
    position: relative;
}
.hiring-guide__toolbar {
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 0;
	display: flex;
	margin: 0 0 20px;
}
.hiring-guide__title {
    margin: 0 0 10px;
}
.hiring-guide__title > * {
    font-family: Visby, sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: rgb(17, 24, 39);
    margin: 0;
}
.hiring-guide__controls {
    flex-wrap: nowrap;
    display: flex;
    gap: 0;
    width: 100%;
}
.hiring-guide__search {
    display: flex;
    flex-basis: calc(100% - 125px);
    max-width: calc(100% - 125px);
    flex-grow: 1;
    padding: 0 0 0 12px;
    flex-shrink: 1;
    border-radius: 6px 0 0 6px;
    align-items: center;
    border: 1px solid #d1d5db;
    background-color: #fff;
}
.hiring-guide__search-icon {
    margin-right: 6px;
    color: #999;
    font-size: 14px;
}
.hiring-guide__search-input {
    border: none;
    outline: none;
    padding: 10px;
    font-size: 14px;
    width: 200px;
}
.hiring-guide__sort {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 7px;
    justify-content: space-between;
    max-width: 100px;
    width: 100%;
    flex-basis: 125px;
    flex-grow: 0;
    flex-shrink: 0;
    border-radius: 0px 6px 6px 0;
    border: 1px solid #d1d5db;
    padding: 10px 16px;
    font-size: 14px;
    cursor: pointer;
    background-color: #f9fafb;    
}
.hiring-guide__sort-arrows {
    max-width: 18px;
    flex-basis: 18px;
    flex-grow: 0;
    flex-shrink: 0;
    color: rgb(156 163 175);
}
.hiring-guide__sort[data-order="ASC"]{
    .hiring-guide__sort-arrows .icon-arrow-down {
        display: none;
    }
}
.hiring-guide__sort[data-order="DESC"]{
    .hiring-guide__sort-arrows .icon-arrow-up {
        display: none;
    }
}
.hiring-guide__sort-text {
    flex-grow: 1;
    flex-shrink: 1; 
}
#hiring-guide-posts {
    scroll-margin-top: 200px;
}
.hiring-guide__posts-grid {
    display: grid;
    grid-template-columns: repeat( auto-fit, minmax( 280px, 1fr ) );
    gap: 20px;
}
.hiring-guide-post {
    overflow: hidden;
    background: #fff;
    display: block;
}
.hiring-guide-post__thumbnail {
    display: block;
    width: 100%;
    height: 368px;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
}
.hiring-guide-post__thumbnail > img {
    width: 100%;
    height: inherit;
    object-fit: cover;
    transition: scale 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.hiring-guide-post:hover .hiring-guide-post__thumbnail > img {
    scale: 1.1;
    opacity: .75;
}
.hiring-guide-post__content {
    display: block;
    padding: 15px;
}
.hiring-guide-post__title {
    font-family: Arimo, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: rgb(17, 24, 39);
    white-space-collapse: collapse;
    text-decoration: none;
    display: block;
}
.hiring-guide-post__post-type {
    display: block;
    color: rgb(107, 114, 128);
    font-family: Arimo, sans-serif;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}
.hiring-guide__pagination {
    border-top: 1px solid rgb(229 231 235);
    margin-top: 32px;
    justify-content: space-between;
    display: flex;
}
.hiring-guide__pagination-numbers {
    display: none;
}
.hiring-guide__pagination button,
.hiring-guide__pagination a,
.hiring-guide__pagination span {
    appearance: none;
    background: none;
    border: none;
    font-size: 14px;
    padding: 16px 16px 0;
    margin: 0;
    cursor: pointer;
    border-top: 1px solid transparent;
    display: block;
    color: #000;
    transition: border-color 0.3s ease-in-out;
}
.hiring-guide__pagination span {
    cursor: default;
}
.hiring-guide__pagination button:not([disabled]):hover,
.hiring-guide__pagination a:hover {
    border-color: rgb(209 213 219);
}
.hiring-guide__pagination button[disabled]{
    opacity: 0.5;
    cursor: not-allowed;
}
.hiring-guide__pagination-prev > button,
.hiring-guide__pagination-prev > a,
.hiring-guide__pagination-next > button,
.hiring-guide__pagination-next > a {
    padding: 16px 0 0;
}
.hiring-guide__pagination span.current {
    border-color: rgb(79 70 229);
    color: rgb(79 70 229);
}
.hiring-guide__loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate( -50%, -50% );
    z-index: 10;
}
.hiring-guide__loading-spinner {
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-left-color: rgb(79 70 229);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
.hiring-guide__posts-error,
.hiring-guide__posts-none {
    text-align: center;
    padding: 40px 20px;
    color: #d32f2f;
    font-size: 18px;
    font-family: Visby, sans-serif;
    font-weight: 500;
    line-height: 24px;
    margin: 0;
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@media only screen and (min-width: 626px){
    
    .hiring-guide-post__thumbnail {
        height: 230px;
    }
    
}

@media only screen and (min-width: 767px){

    .hiring-guide__toolbar {
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-end;
    }
    .hiring-guide__title {
        max-width: 200px;
        flex-basis: 200px;
        flex-shrink: 0;
        flex-grow: 0;
        margin: 0;
    }
    .hiring-guide__controls {
        flex-basis: 350px;
        max-width: 350px;
        flex-grow: 0;
        flex-shrink: 1;
    }
    .hiring-guide__pagination-numbers {
        display: flex;
    }

}

@media only screen and (min-width: 1024px) {

    .hiring-guide__posts-grid {
        grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
    }

}