.work .image-block .images {
    display: flex;
    gap: 15px;
    height: calc(((100vw - 2*var(--padding-inline) - 15px)/2)/1.23125);
}

.work .image-block .images.small {
    height: fit-content;
    margin-top: 20px;
    gap: 15px;
    display: grid;
    grid-template-columns: calc(25% - 11.25px) calc(25% - 11.25px) calc(25% - 11.25px) calc(25% - 11.25px);
}

.work .image-block .images.small img {
    height: calc(((100vw - 2*var(--padding-inline) - 45px)/4)/1.4);
}

.work .image-block .images img {
    width: 100%;
    object-fit: cover;
    transition: transform .2s;
    cursor: pointer;
}

.work .image-block .images.big img {
    width: calc(50% - 7.5px);
}

.work .image-block .images img:hover {
    transform: scale(1.03);
}

.work p {
    height: 30px;
}

.work p strong {
    float: left;
}

.work p.excerpt {
    width: 100%;
    margin-bottom: 80px;
    height: unset;
}

.work-preview-list {
    display: grid;
    gap: 15px;
    width: 100%;
    grid-template-columns: calc(25% - 11.25px) calc(25% - 11.25px) calc(25% - 11.25px) calc(25% - 11.25px);
    margin-block: 20px;
}

.work-preview {
    height: 170px;
    width: 100%;
    background-size: cover;
    cursor: pointer;
    transition: box-shadow .3s ease;
    background-position: center;
}

.work-preview:hover {
    box-shadow: inset 0 0 0 2000px rgba(255, 255, 255, 0.6);
}

@media (max-width: 1100px) {
    .work-preview-list {
        grid-template-columns: calc(33.333% - 7px) calc(33.333% - 7px) calc(33.333% - 7px);
    }
    .work-preview {
        height: calc(0.71*(100vw - 2*var(--padding-inline))/3);
    }
}

@media (max-width: 700px) {
    .work-preview-list {
        grid-template-columns: calc(50% - 7.5px) calc(50% - 7.5px);
    }
    .work-preview {
        height: calc(0.71*(100vw - 2*var(--padding-inline))/2);
    }

}

@media (max-width: 450px) {
    .category-header ul {
        padding-left: 0;
    }
}

@media (max-width: 370px) {
    .category-header ul {
        gap: 10px;
    }
    .work-preview-list {
        grid-template-columns: 100%;
    }
    .work-preview {
        height: calc(0.71*(100vw - 2*var(--padding-inline)));
    }

}

@media (max-width: 500px) {
    .work .image-block .images {
        flex-direction: column;
        height: unset;
    }
    .work .image-block .images img {
        height: calc((100vw - 2*var(--padding-inline))/1.23125);
    }
    .work .image-block .images.small {
        grid-template-columns: calc(50% - 7.5px) calc(50% - 7.5px);
    }
    .work .image-block .images.small img {
        height: calc(((100vw - 2*var(--padding-inline) - 15px)/2)/1.4);
    }
    .work .image-block .images.big img {
        width: 100%;
    }
}