/* ___ PORTFOLIO ___ */
.portfolio {padding-block: 54px; --_c-border:#AEAEAE66; --_c-border-drk:#AEAEAECC;}
.portfolio .head {margin-bottom: 40px;}
.portfolio .head > :first-child {font-size: var(--fs-xl); color: var(--c-primary); font-weight: 600; line-height: 1.3; margin-bottom: 12px;}
.portfolio .head p {font-size: var(--fs-xs); color: #000;}
.portfolio .wrapper {display: grid; grid-template-columns: minmax(170px, 200px) minmax(772px, 922px); gap: 78px;}
.portfolio .product-box div[data-tab] {display: grid; grid-template-columns: repeat(3, 1fr); gap: 45px 40px;}
.portfolio .product {width: 100%; background-color: #fff; border-radius: 12px; border: 1px solid var(--_c-border);}
.portfolio .product:hover {box-shadow: var(--shadow-sm);}
.portfolio .product img {width: 100%; height: 176px; object-fit: cover; background-color: transparent; border-radius: 12px 12px 0 0;}
.portfolio .product > :nth-child(2) {display: block; font-size: calc(var(--fs-sm, 18px) + 2px); font-weight: 500;  text-align: center; color: var(--c-neutral-drk); padding: 15px;}
.portfolio .tabs > ul li:not(:last-of-type) {margin-bottom: 16px;}
.portfolio .tabs >  *:not(ul) {font-size: calc(var(--fs-sm) + 4px ); color: var(--c-primary); margin-bottom: 20px; display: block; font-family: var(--ff-primary); font-weight: 700;}
.portfolio .tabs> ul:not(:last-of-type) {margin-bottom: 16px;}
.portfolio .btn__primary {width: 100%; font-family: var(--ff-primary); font-weight: 500; font-size: var(--fs-base, 16px); background-color: transparent; border-radius: 2px; border: 2px solid var( --c-neutral-wht); color: rgb(122,113,113);}
.portfolio li button.active {font-weight: 600; background-color: var(--c-primary); color: #fff; border: none; border: 2px solid var(--c-primary);}
.pagination {display: flex; justify-content: center; border: 1px solid var(--_c-border); border-radius: 4px; width: fit-content; margin: 32px auto 0;}
.pagination li > * {border-inline: 1px solid var(--_c-border); width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; color: #000; font-family: var(--ff-primary); font-size: var(--fs-xs); font-weight: 500;}
.pagination li a:hover {background-color: var(--c-neutral-wht);}
.pagination li a.active {background-color: var(--c-primary); color: #fff;}
.pagination li a.active:hover {background-color: var(--c-primary-drk);}

.modal {position: fixed; display: none; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0 0 0 / 0.9); z-index: 300;}
.modal .modal-content {width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.modal img {width: 40%;}
.modal :where(.prev, .next) {position: absolute; top: 50%; width: auto; font-size: 20px; font-weight: 700; background-color: var(--c-primary); color: #fff; padding: 16px; border-radius: 0 3px 3px 0; margin-top: -22px; cursor: pointer;}
.modal .next {right: 0; border-radius: 3px 0 0 3px;}
.modal .close {position: absolute; width: 50px; height: 50px; top: 15px; right: 35px; display: flex; justify-content: center; align-items: center; font-size: 35px; font-weight: 700; border-radius: 6px; color: #fff; background-color: var(--c-primary);}
.modal :where(.close:hover, .close:focus) {color: #bbb; text-decoration: none;}
:where(.main, .main *) {transition: var(--transition);}

/* ___ MEDIA QUERY ___ */
@media only screen and (max-width: 1200px) {
    .portfolio {padding-block: 20px;}
    .portfolio .wrapper {gap: 50px;} 
    .portfolio .head p {margin-top: 18px;}
    .portfolio .product-box div[data-tab] {gap: 30px 30px;}
}

@media only screen and (max-width: 991px) {
    .portfolio .wrapper {grid-template-columns: 1fr; gap: 20px;}
    .portfolio .tabs > ul {display: flex; flex-direction: row; gap: 20px; justify-content: center; flex-wrap: wrap;}
    .portfolio .tabs > ul li:not(:last-of-type)  {margin-bottom: 0;}
    .portfolio .btn__primary {padding: 8px 36px;}
    .portfolio .tabs>*:not(ul) {text-align: center;}

    .modal .close {width: 40px; height: 40px;}
    .modal :where(.prev, .next) {padding: 12px;}
}

@media only screen and (max-width: 767px) {
    .portfolio .product-box div[data-tab] {grid-template-columns: repeat(2, 1fr);}
    .portfolio .product-box div[data-tab] {gap: 20px 19px;}
    .portfolio .tabs {gap: 30px 20px;}
}

@media only screen and (max-width: 575px) {
    .portfolio .head {margin-bottom: 24px;}
    .pagination {margin-top: 20px;}
    .pagination li > * {width: 36px; height: 36px;}
    .modal .close {width: 30px; height: 30px; font-size: 24px;}
    .modal :where(.prev, .next) {padding: 10px; font-size: 14px;}
}

@media only screen and (max-width: 475px) {
    .portfolio .product-box div[data-tab] {grid-template-columns: 1fr;}
    .portfolio .tabs > ul {gap: 10px;}
    .portfolio .product img {height: auto;}
    .portfolio .btn__primary {padding-inline: 32px;}
    .modal .modal-img {max-width: 70%;}
}