/* BREADCRUMB  */
.breadcrumb {background-color: #f5f5f5; padding-block: 8px; --_c-grey-600: #626568;}
.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; margin-bottom: 80px;}
.gallery .head > :first-child {font-size: calc(var(--fs-xl, 36px) - 1px);}
.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); text-transform: capitalize; margin-bottom: 6px;}
.gallery .details:hover strong {color: var(--c-secondary);}
.gallery .details > img {width: 100%; height: 280px; object-fit: contain; margin-inline: auto; cursor: pointer;}
.gallery .details div {display: flex; flex-direction: column; align-items: center; padding-inline: 6px;}
.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);}

/* MEDIA QUERIES */
@media only screen and (max-width: 991px) {
    .gallery .head {margin-bottom: 40px;}
    .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);}
    .gallery .modal > img {width: auto; height: auto;}
}

@media only screen and (max-width: 475px) {
    .gallery .head {gap: 10px; margin-bottom: 20px;}
    .gallery .products {grid-template-columns: 1fr;}
}