/* Carousel Two Styles Dynamic version – works with templates/carousel-two.php and assets/js/carousel-two.js /* Container */ .service-list { max-width: 940px; margin: 0 auto; min-height: 460px; display: flex; flex-direction: column; justify-content: center; } @media (max-width: 479px) { .service-list { min-height: 690px; } } /* Each service item */ .service-item { position: relative; display: flex; margin: 5px 0; border-left: 2px solid #fff; } .service-line { background: #fff; height: 0; width: 2px; margin-right: 16px; margin-top: 50px; left: -1px; } .service-item h4 { font-size: 22px; margin: 0; color: #eee; } .service-item h4:before { background-color: #f70; content: ""; position: absolute; height: 100%; width: 2px; left: -20px; } .service-item .service-text { display: flex; flex: 1 1 auto; max-width: 800px; overflow: hidden; height: 0; /* will expand/contract with GSAP */ color: #fff; } .service-item .service-text p { margin: 40px 10px 40px 0; font-size:18px; } .service-item .service-image img { width: 400px; height: auto; margin-left: 100px; } @media (min-width: 992px) { .service-list { padding-top: 3rem; } .service-item { margin: 5px 15px; } } /* --- Keep two-column layout, just scale down --- */ /* Tablet screens (up to 991px) */ @media (max-width: 991px) { .service-list { max-width: 95%; padding: 0 1rem; } .service-item h4 { font-size: 20px; } .service-item .service-text p { font-size: 17px; margin: 10px 0px 0 0; padding: 30px 10px 30px; /* tighter side margin */ } .service-item .service-image img { width: 400px; height: auto; } } /* Mobile screens (up to 767px) */ @media (max-width: 767px) { .service-list { max-width: 100%; padding: 0 0.5rem; } .service-item h4 { font-size: 15px; } .service-item .service-text p { font-size: 14px; margin: 10px 30px 0 0; } .service-item .service-image img { width: 400px; height: auto; } } /* Very small devices (up to 479px) */ @media (max-width: 479px) { .service-item h4 { font-size: 14px; } .service-item .service-text p { font-size: 13px; margin: 10px 15px 0 0; } .service-item .service-image img { width: 400px; height: auto; margin-left: 0px !important;} }