@charset "utf-8";
/* ==========
works__list
========== */
/* tab */
.tab {
    display: flex;
    gap: 12px;
    justify-content: end;
    margin-top: 40px;
}

.tab__item {
    background-color: #fff;
    color: var(--gray-main);
    border: 1px solid var(--gray-main);
    cursor: pointer;
    font-size: 1.6rem;
    transition: all .3s ease-in-out;
}

.tab__item:hover {
    opacity: .6;
}

.tab__item a {
    padding: 8px 16px;
}

.tab__item.active {
    background: var(--gray-main);
    color: #fff;
}

/* .area */
.area {
    display: none;
    opacity: 0;
}

.area.active {
    display: block;
    animation-name: displayAnime;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

@keyframes displayAnime {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* .works__item */
.works__list {
    margin-top: 100px;
}

.works__item {
    width: 30%;
}

/* .pagenation */
.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 80px;
    color: var(--gray-main);
}

.page-numbers {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.6rem;
    font-weight: 300;
    text-align: center;
    padding: 6px 4px;
    transition: all .3s ease-in-out;
}

.page-numbers:hover {
    opacity: .6;
}

.page-numbers.current {
    border-bottom: 1px solid var(--gray-main);
}

.page-numbers.current:hover {
    opacity: 1;
}

.prev,
.next {
    padding: 0;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

.prev {
    border-right: 16px solid var(--gray-main);
}

.next {
    border-left: 16px solid var(--gray-main);
}

@media screen and (max-width: 767px) {
    /* tab */
    .tab {
        gap: 8px;
    }

    .tab__item {
        font-size: 1.4rem;
    }

    /* .works__item */
    .works__list {
        margin-top: 40px;
    }

    .works__item {
        width: 100%;
    }

    /* .pagenation */
    .pagenation {
        margin-top: 60px;
    }
 }