.pp-carousel { margin: 40px 0; } .pp-carousel__header { margin-bottom: 18px; } .pp-carousel__title { font-size: 42px; line-height: 1.1; margin: 0 0 6px 0; font-weight: 500; } .pp-carousel__subtitle { font-size: 44px; line-height: 1.1; font-weight: 300; opacity: .85; } .pp-carousel__slider { position: relative; padding: 10px 0 0 0; } .pp-carousel__card { display: block; } .pp-carousel__image { display: block; border-radius: 2px; overflow: hidden; background: #f6f6f6; position: relative; } .pp-carousel__image img { width: 100%; height: auto; display: block; aspect-ratio: 1 / 1; object-fit: cover; } .pp-carousel__label { position: absolute; top: 12px; left: 12px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: 3px; letter-spacing: .02em; text-transform: capitalize; pointer-events: none; } .pp-carousel__meta { display: flex; justify-content: space-between; gap: 16px; padding: 14px 2px 0 2px; align-items: baseline; } .pp-carousel__name { font-size: 18px; font-weight: 600; color: inherit; text-decoration: none; } .pp-carousel__name:hover { text-decoration: underline; } .pp-carousel__price { font-size: 16px; opacity: .7; white-space: nowrap; } .pp-carousel__priceSuffix { margin-left: 2px; } .pp-carousel__footer { margin-top: 22px; } /* Navigation arrows */ .pp-carousel__nav .pp-carousel__prev, .pp-carousel__nav .pp-carousel__next { position: absolute; top: 45%; width: 40px; height: 40px; transform: translateY(-50%); cursor: pointer; opacity: .6; z-index: 3; transition: opacity .2s; } .pp-carousel__nav .pp-carousel__prev:hover, .pp-carousel__nav .pp-carousel__next:hover { opacity: 1; } .pp-carousel__nav .pp-carousel__prev { left: -10px; } .pp-carousel__nav .pp-carousel__next { right: -10px; } .pp-carousel__nav .pp-carousel__prev:after, .pp-carousel__nav .pp-carousel__next:after { content: ""; display: block; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; position: absolute; top: 50%; left: 50%; } .pp-carousel__nav .pp-carousel__prev:after { transform: translate(-50%, -50%) rotate(135deg); } .pp-carousel__nav .pp-carousel__next:after { transform: translate(-50%, -50%) rotate(-45deg); } .pp-carousel__nav .swiper-button-disabled { opacity: .2; cursor: default; } /* Responsive */ @media (max-width: 992px) { .pp-carousel__title { font-size: 34px; } .pp-carousel__subtitle { font-size: 34px; } .pp-carousel__nav .pp-carousel__prev { left: 0; } .pp-carousel__nav .pp-carousel__next { right: 0; } } @media (max-width: 576px) { .pp-carousel__title { font-size: 26px; } .pp-carousel__subtitle { font-size: 26px; } .pp-carousel__name { font-size: 16px; } }