* { box-sizing:border-box; } body { margin:0; padding:0; } img { width:100%; } .row { display:flex; padding:5px; flex-wrap:wrap; } .column { flex:25%; padding:5px; } .column img { margin-top: 5px; margin-bottom: 5px; } @media (max-width:800px) { .column { flex:50%; } } @media (max-width:600px) { .column { flex:100%; } } .swiper-container { position: relative; height: 20em; display: flex; align-items: center; justify-content: center; overflow: hidden; } .swiper-wrapper { width: 100%; } .swiper-slide { display: flex; justify-content: center; align-items: center; flex-shrink: 0; width: 100%; background-color: #f9dda5; } .swiper-slide img { max-height: 100%; max-width: 100%; object-fit: contain; } .swiper-button-prev, .swiper-button-next { width: 40px; height: 40px; margin-top: -20px; background: #A0DAA9; border-radius: 20%; border: none; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); position: absolute; top: 50%; z-index: 10; display: flex; align-items: center; justify-content: center; opacity: 0.8; transition: opacity 0.3s, background-color 0.3s; } .swiper-button-prev::after, .swiper-button-next::after { font-size: 14px; color: #6C757D; } .swiper-button-prev:hover, .swiper-button-next:hover { opacity: 1; background: #CAD2C5; } .swiper-button-disabled { display: none; } .swiper-pagination-bullet { background: #fff; } @media (max-width: 768px) { .swiper-container { margin: 10px 10px 0 10px; height: auto; } .swiper-slide { margin-top: 5px; } .swiper-slide img { } .swiper-container .swiper-pagination, .swiper-container .swiper-button-prev, .swiper-container .swiper-button-next { display: none; } } @media (min-width: 768px) and (max-width: 1199px) { .swiper-container { height: calc((100vw - 40px) / 2 * 3 / 4); } .swiper-button-prev, .swiper-button-next { width: 50px; height: 50px; margin-top: -25px; } .swiper-button-prev::after, .swiper-button-next::after { font-size: 20px; } } @media (min-width: 1200px) and (max-width: 1599px) { .swiper-container { height: calc((100vw - 60px) / 3 * 3 / 4); } .swiper-button-prev, .swiper-button-next { width: 60px; height: 60px; margin-top: -30px; } .swiper-button-prev::after, .swiper-button-next::after { font-size: 24px; } } @media (min-width: 1600px) { .swiper-container { height: calc((100vw - 80px) / 4 * 3 / 4); } .swiper-button-prev, .swiper-button-next { width: 70px; height: 70px; margin-top: -35px; } .swiper-button-prev::after, .swiper-button-next::after { font-size: 28px; } }