// Product Category .product-category-panel { margin-bottom: 35px; .owl-carousel { margin-top: -10px; padding-top: 10px; } .owl-carousel .owl-nav button { &.owl-prev, &.owl-next { width: 30px; font-size: 24px; color: #333; line-height: 22px; } &.owl-prev { left: -41px; } &.owl-next { right: -41px; } } .section-title { h2 { font-weight: 700; font-size: 1.6rem; line-height: 1.2; font-family: $font-family; letter-spacing: -0.05em; color: #282d3b; text-transform: uppercase; } padding-bottom: 1rem; border-bottom: 1px solid #dbdbdb; margin-bottom: 2.5rem; } } .product-category { color: #1d2127; margin-bottom: 2rem; position: relative; a:hover { color: inherit; } img { width: 100%; } figure { margin-bottom: 0; position: relative; &:after { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: transparent; transition: all 0.3s; z-index: 1; content: ""; } } &:hover { figure:after { background-color: rgba(27, 27, 23, 0.15); } } .owl-item > & { margin-bottom: 0; } } .category-content { padding: 2rem; display: flex; display: -ms-flex-box; flex-direction: column; -ms-flex-direction: column; align-items: center; -ms-flex-align: center; h3 { font-weight: 700; font-size: 1.5rem; line-height: 1.35; font-family: $font-family; letter-spacing: -.005em; margin-bottom: 1rem; text-transform: uppercase; } span { font-weight: 400; font-size: 10.2px; line-height: 1.8; font-family: $font-family; letter-spacing: normal; margin-top: -10px; text-transform: uppercase; opacity: .7; color: #1d2127; mark { padding: 0; background-color: transparent; color: inherit; } } } .content-left-center, .content-left-bottom, .content-center, .content-center-bottom { .category-content { padding: 20.4px 25.5px; position: absolute; width: 100%; transform: translateY(-50%); z-index: 2; h3, span { color: #fff; } } } .content-left-center, .content-center { .category-content { left: 0; top: 50%; } } .content-left-center { .category-content { align-items: flex-start; } } .content-left-bottom { .category-content { align-items: flex-start; left: 0; bottom: 0; transform: none; } } .content-center-bottom { figure { min-height: 90px; } .category-content { bottom: 0; transform: none; padding: 20.4px 0; h3, span { margin-bottom: 0; color: #1d2127; } } } .overlay-lighter { figure:after { background-color: rgba(27, 27, 23, 0); } &:hover figure:after { background-color: rgba(27, 27, 23, 0.15); } } .overlay-darker { figure:after { background-color: rgba(27, 27, 23, 0.25); } &:hover figure:after { background-color: rgba(27, 27, 23, 0.4); } } .overlay-light { figure:after { background-color: rgba(27, 27, 23, 0.75); } &:hover figure:after { background-color: rgba(27, 27, 23, 0.6); } } .hidden-count { .category-content span { max-height: 10px; transition: all .5s; transform: translateY(20%); opacity: 0; } &:hover .category-content span { max-height: 30px; transform: none; opacity: .7; } } .creative-grid .product-category{ margin-bottom: 0; padding-bottom: 2rem; &.content-left-bottom { .category-content { margin-bottom: 20px; } } figure { height: 100%; img { width: 100%; height: 100%; object-fit: cover; padding: 0; } } } .height-600 { height: 600px; } .height-400 { height: 400px; } .height-300 { height: 300px; } .height-200 { height: 200px; } @media (min-width: 1199px) { .col-5col-1 { flex: 0 0 20%; max-width: 20%; } } @media (max-width: 767px) { .height-600 { height: 400px; } .height-300 { height: 200px; } } @media (max-width: 450px) { .content-center-bottom .category-content { padding: 16.8px 21px; text-align: center; flex-wrap: wrap; } } @media (max-width: 400px) { .content-center-bottom .category-content { padding-bottom: 1rem; } } @media (max-width: 1200px) { .product-category-panel .owl-carousel .owl-nav button { &.owl-next, &.owl-prev { width: 15px; } &.owl-next { right: -18px; } &.owl-prev { left: -18px; } } } @media (max-width: 1159px) { .product-category-panel .owl-carousel .owl-nav button { &.owl-next, &.owl-prev { width: 30px; } &.owl-next { right: -41px; } &.owl-prev { left: -41px; } } } @media (max-width: 1024px) { .product-category-panel .owl-carousel .owl-nav button { &.owl-next, &.owl-prev { width: 15px; } &.owl-next { right: -18px; } &.owl-prev { left: -18px; } } }