/*  Breadcrum */
.breadcrumb {background-color: #f5f5f5; padding-block: 8px; --_c-grey-600: #6c757d;}
.breadcrumb li {display: inline-flex; align-items: center;}
.breadcrumb li:not(:last-child)::after {margin-inline: 8px; content: '/';}
.breadcrumb li a {color: var(--c-tertiary);}
.breadcrumb li a:hover {color: var(--c-primary);}
.breadcrumb li a svg {margin-right: 3px;}
.breadcrumb li .active {color: var(--_c-grey-600);}
.breadcrumb * {transition: var(--transition);}


/*  gallery */
.gallery {padding-block: 20px;}
.gallery .head {display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; padding-block: 30px;}
.gallery .head > :first-child {font-family: var(--ff-secondary); font-size: calc(var(--fs-xl, 36px) - 1px); font-weight: 700;}
.gallery .products {display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px 30px;}
.gallery .details {display: flex; flex-direction: column; justify-content: space-between; text-align: center; background-color: #f0f0f0; padding-bottom: 15px;}
.gallery .details > div :first-child {font-size: calc(var(--fs-sm, 18px) + 2px); margin-bottom: 6px;}
.gallery .details:hover strong {color: var(--c-secondary);}
.gallery .details > img { width: 100%; height: 234px; object-fit: contain; cursor: pointer;}
.gallery .details div {display: flex; flex-direction: column; align-items: center;}
.modal {position: fixed; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: rgba(0 0 0 / 0.3); z-index: 600;}  
.modal #close-btn {position: absolute; top: 2%; right: 2%; font-size: 40px; font-weight: 600;}
.gallery :where(.head, .head *, .products, .details, .details *, .modal) {transition: var(--transition);}
.gallery #loader{display: flex; margin-inline: auto;}
/* {Modal} */
.modal {width: 100%; height: 100%; position: fixed; top: 0; display: flex; justify-content: space-between; align-items: center; background-color: rgba(0, 0, 0, 0.733); padding-inline: 20px; margin-top: -1px; z-index: 100; animation: zoom 0.3s ease-in-out;}
.modal button:hover svg {fill: var(--c-light);}
.modal #close {position: absolute; top: 25px; right: 30px;}
.modal img {width: 25%; border-radius: 10px;}
:where(.modal, .modal :where(button, svg, img)) {transition: var(--transition);}

@keyframes zoom {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}

@media only screen and (max-width: 991px) {
.gallery .head {margin-bottom: 0px;}
.gallery .products {grid-template-columns: repeat(3, 1fr); gap: 15px;}
}

@media only screen and (max-width: 767px) {
.gallery .head {grid-template-columns: 1fr;}
.gallery .products {grid-template-columns: repeat(2, 1fr);}
.modal img {max-width:60%; width:100%} 
}

@media only screen and (max-width: 475px) {
.gallery .head {gap: 10px; margin-bottom: 0px;}
.gallery .products {grid-template-columns: 1fr;}
.gallery .head { padding-block:20px; }
.modal img {max-width: 75%; width:100%} 
}