.swiper{width:352px;height:304px;padding-left:32px;padding-right:32px}.swiper.swiper-with-rows-2{height:608px}@media screen and (min-width: 680px){.swiper{width:672px}}@media screen and (min-width: 1024px){.swiper{width:992px}}@media screen and (min-width: 1333px){.swiper{width:1313px}}@media screen and (min-width: 1585px){.swiper{width:1568px;padding-left:0;padding-right:0}}.pic-top,.pic-bottom{width:288px;height:288px}.pic-bottom{margin-top:32px}.pic-top .image-container,.pic-bottom .image-container{width:288px;height:288px;border-radius:.75rem;background:white;padding:4px}.pic-top .image-container img,.pic-bottom .image-container img{border-radius:.75rem;cursor:pointer}.swiper-button-next,.swiper-button-prev{color:#ed6971;outline:none}.swiper-button-next{right:0}.swiper-button-prev{left:0}.thumbnail-bar{display:flex;flex-wrap:nowrap;justify-content:space-between;margin-left:-10px;margin-right:-10px}.thumbnail-container{position:relative;flex:1;cursor:pointer;max-width:25%;padding:0 10px;img {border-radius: .375rem;} &.selected {.indicator {position: absolute; top: -5px; bottom: -5px; left: 5px; right: 5px; border: 2px solid #d55e65; border-radius: .375rem;}} .indicator-point-container {display: none;}}@media (max-width: 450px){.thumbnail-bar{margin-left:-3px;margin-right:-3px}.thumbnail-container{padding:3px;&.selected{.indicator {display: none;} .indicator-point-container {margin-top: 5px; display: flex; position: absolute; justify-content: center; left: 0; right: 0; .indicator-point {width: 15px; height: 15px; border-radius: 20px; background: #d55e65; justify-self: center;}}}}}