.featured-products-section { background: #000; color: #DFC77F; } .featured-products-section h2 { color: #DFC77F; } .featured-products-carousel .swiper-wrapper { align-items: center; } .featured-products-carousel .swiper-slide { padding: 20px 0; display: flex; align-items: center; } .featured-product-slide { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; transition: all 0.5s ease; } .featured-product-slide::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: linear-gradient(0deg, transparent, transparent 30%, rgba(175, 177, 54, 0.5)); transform: rotate(-45deg); transition: all 0.5s ease; opacity: 0; } .featured-product-slide:hover { transform: scale(1.05); box-shadow: 0 0 20px #dee94ca6; } .featured-product-slide:hover::before { opacity: 1; transform: rotate(-45deg) translateY(100%); } .featured-product-slide .product-image { width: 100%; height: 100%; } .featured-product-slide .product-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .featured-product-slide .product-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(5px); color: #DFC77F; } .featured-product-slide .product-title { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .featured-product-slide .product-title a { top: 10%; color: #DFC77F; font-size: 1.0rem; } .featured-product-slide .price, .featured-product-slide .price * { color: #DFC77F; } .featured-products-carousel .swiper-button-next, .featured-products-carousel .swiper-button-prev { color: #DFC77F; } .featured-products-carousel .swiper-pagination-bullet { background: rgb(108, 108, 108); opacity: 1; } .featured-products-carousel .swiper-pagination-bullet-active { background: rgb(14, 125, 230); } @media (max-width: 767.98px) { .featured-product-slide .product-title { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .featured-product-slide .product-title a { font-size: 14px; } .featured-product-slide .product-image img {} .featured-product-slide .product-info { padding: 8px 8px; } .featured-product-slide { display: block; } .featured-product-slide .product-info, .featured-product-slide .product-image { flex: none; width: 100%; } } @media (min-width: 768px) and (max-width: 991.98px) { .featured-product-slide .product-title { font-size: 24px; } .featured-product-slide .product-image img {} }