.page-wrapper {
    position: relative;
    display: flex;
    flex-flow: column;
    width: 100%;
    height: fit-content;
    row-gap: 5.556vw; /*80px*/
}

.page-wrapper .top {
    position: relative;
    display: block;
    width: 100%;
    height: fit-content;
}

.page-wrapper .top .terms {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: fit-content;
    justify-content: center;
    column-gap: .694vw; /*10px*/
}

.page-wrapper .top .terms .margin-space {
    display: none;
}

.page-wrapper .top .terms .term {
    position: relative;
    display: flex;
    width: fit-content;
    padding: .486vw .834vw .556vw; /*7px 12px 8px*/
    border-radius: 1.388vw; /*20px*/
    border: 1px solid var(--black);
    background-color: transparent;
    font-size: 1.4rem;
    letter-spacing: .2px;
}

.page-wrapper .top .terms .term:hover,
.page-wrapper .top .terms .term.current {
    border: 1px solid var(--black);
    background-color: var(--black);
    color: var(--white);
}

.page-wrapper .posts-inner .columns {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: fit-content;
    column-gap: var(--columnGap);
    row-gap: 3.472vw; /*50px*/
    padding: 0 var(--lateralMargin);
}

.page-wrapper .posts-inner .columns .column {
    position: relative;
    display: flex;
    flex-flow: column;
    width: calc(25% - ( var(--columnGap) * .76 ) );
    height: fit-content;
}

.page-wrapper .posts-inner .columns .column .item {
    position: relative;
    display: flex;
    flex-flow: column;
    width: 100%;
    height: fit-content;
    row-gap: .834vw; /*12px*/
}

.page-wrapper .posts-inner .columns .column .thumbnail {
    position: relative;
    display: block;
    width: 100%;
    height: 19.027vw; /*274px*/
    overflow: hidden;
    border-radius: 1.388vw; /*20px*/
    transition: transform .6s cubic-bezier(0, 0, 0.3, 1);
}

.page-wrapper .posts-inner .columns .column .thumbnail img {
    transition: transform .6s cubic-bezier(0, 0, 0.3, 1);
}

.page-wrapper .posts-inner .columns .column:hover .thumbnail {
    transform: scale(.94);
}

.page-wrapper .posts-inner .columns .column:hover .thumbnail img {
    transform: scale(1.24);
}

.page-wrapper .posts-inner .columns .column .terms {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding: 1.389vw 0 .763vw; /*20px 0 11px*/
    gap: .347vw; /*5px*/
}

.page-wrapper .posts-inner .columns .column .terms .term {
    position: relative;
    display: inline-block;
    width: fit-content;
    height: fit-content;
    padding: .347vw .694vw;
    border-radius: 2.08vw;
    border: 1px solid var(--grey);
    letter-spacing: .013vw; /*.2px*/
}

.page-wrapper .posts-inner .columns .column .terms .term:hover {
    background-color: var(--black);
    border: 1px solid var(--black);
    color: var(--white);
}

.page-wrapper .pagination-inner {
    position: relative;
    display: flex;
    padding: 0 var(--lateralMargin);
    justify-content: center;
    gap: .416vw; /*6px*/
    padding-top: 6.94vw; /*100px*/
    margin-bottom: -3.472vw; /*-50px*/
}

.page-wrapper .pagination-inner a {
    color: var(--black);
}

.page-wrapper .pagination-inner .current {
    text-decoration: underline;
}


@media screen and (max-width: 1440px) {
    .page-wrapper {
        row-gap: 80px;
    }

    .page-wrapper .top {
        column-gap: 10px;
    }

    .page-wrapper .top .terms {
        column-gap: 10px;
    }

    .page-wrapper .top .terms .term {
        padding: 7px 12px 8px;
        border-radius: 20px;
        border: 1px solid var(--black);
        letter-spacing: .2px;
    }

    .page-wrapper .top .terms .term:hover,
    .page-wrapper .top .terms .term.current {
        border: 1px solid var(--black);
    }

    .page-wrapper .posts-inner .columns {
        row-gap: 50px;
    }

    .page-wrapper .posts-inner .columns .column {
        width: calc(25% - ( var(--columnGap) * .76 ) );
    }

    .page-wrapper .posts-inner .columns .column .item {
        row-gap: 12px;
    }

    .page-wrapper .posts-inner .columns .column .thumbnail {
        height: 274px;
        border-radius: 20px;
    }

    .page-wrapper .posts-inner .columns .column .terms {
        padding: 20px 0 11px;
        gap: 5px;
    }

    .page-wrapper .posts-inner .columns .column .terms .term {
        padding: 5px 10px;
        border-radius: 20px;
        letter-spacing: .2px;
    }

    .page-wrapper .pagination-inner {
        gap: 6px;
        padding-top: 100px;
        margin-bottom: -50px;
    }
}


@media screen and (max-width: 1280px) {
    .page-wrapper .posts-inner .columns .column {
        width: calc(33.3% - ( var(--columnGap) * .67 ) );
    }
}


@media screen and (max-width: 1024px) {
    .page-wrapper .posts-inner .columns .column {
        width: calc(50% - ( var(--columnGap) * .51 ) );
    }
}


@media only screen and (max-width: 740px) {
    .page-wrapper {
        row-gap: 41px;
    }

    .page-wrapper .posts-inner .columns .column .thumbnail {
        height: 51.28vw; /*200px*/
        border-radius: 5.128vw; /*20px*/
    }

    .page-wrapper .posts-inner .columns .column:hover .thumbnail,
    .page-wrapper .posts-inner .columns .column:hover .thumbnail img {
        transform: scale(1);
    }

    .page-wrapper .top {
        padding: 0;
        overflow: hidden;
    }

    .page-wrapper .top .terms {
        -webkit-overflow-scrolling: touch;
        overflow: hidden;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        display: flex;
        flex-wrap: unset;
        -ms-overflow-style: none;
        scrollbar-width: none;
        justify-content: flex-start;
        column-gap: 2.56vw; /*10px*/
        /*margin: 0 0 0 var(--lateralMargin);*/
        padding: 1px 0;
    }

    .page-wrapper .top .terms::-webkit-scrollbar {
        display: none;
    }

    .page-wrapper .top .terms .term {
        scroll-snap-align: start;
        min-width: max-content;
        padding: 2.56vw 5.128vw 2.56vw; /*10px 20px 10px*/
        border-radius: 5.128vw; /*20px*/
        border: 1px solid var(--black);
        letter-spacing: .2px;
        font-size: 1.4rem;
    }

    .page-wrapper .top .terms .margin-space {
        scroll-snap-align: start;
        position: relative;
        display: inline-block;
        height: 1px;
        min-width: max-content;
        padding: 0 .512vw; /*2px*/
    }

    .page-wrapper .top .terms .term:last-child {
        margin-right: calc(var(--lateralMargin) * 1);
    }

    .page-wrapper .posts-inner .columns .column {
        width: 100%;
    }

    .page-wrapper .posts-inner .columns .column .terms {
        padding:  5.128vw 0 3.52vw; /*20px 0 11px*/
        gap: 1.282vw; /*5px*/
    }

    .page-wrapper .posts-inner .columns .column .terms .term {
        padding: 1.282vw 2.564vw; /*5px 10px*/
        border-radius: 5.128vw; /*20px*/
        letter-spacing: .051vw; /*.2px*/
    }

    .page-wrapper .pagination-inner {
        gap: 1.538vw; /*6px*/
        padding-top: 15.948vw; /*70px*/
        margin-bottom: 0px;
    }
}