image and text with slider

<style>
    .flex-col {
        flex-direction: column;
    }

    .flex {
        display: flex;
    }

    .text-content-1 {
        --tw-text-opacity: 1;
        color: rgb(17 23 20 / var(--tw-text-opacity));
    }

    .font-bold {
        font-weight: 700;
    }

    .text-content-5 {
        --tw-text-opacity: 1;
        color: rgb(112 116 114 / var(--tw-text-opacity));
    }

    .leading-[20px] {
        line-height: 20px;
    }

    .font-normal {
        font-weight: 400;
    }

    .overflow-x-scroll {
        overflow-x: scroll;
    }

    .w-min {
        width: min-content;
    }

    .border-darkWhite {
        --tw-border-opacity: 1;
        border-color: rgb(243 243 243 / var(--tw-border-opacity));
    }

    .border {
        border-width: 1px;
    }

    .overflow-hidden {
        overflow: hidden;
    }

    .relative {
        position: relative;
    }

    .object-cover {
        object-fit: cover;
    }

    img {
        max-width: 100%;
        display: block;
    }

    .Fw400Fs14Hex404543 {
        font-family: var(--font-lato);
        --tw-text-opacity: 1;
        color: rgb(64 69 67 / var(--tw-text-opacity));
    }

    .!text-content-5 {
        --tw-text-opacity: 1 !important;
        color: rgb(112 116 114/ 1) !important;
    }

    .Fw400Fs12HexA0A2A1 {
        font-family: var(--font-lato);
        font-weight: 400;
    }

    .border-categoryDivider {
        --tw-border-opacity: 1;
        border-color: rgb(222 230 232 / var(--tw-border-opacity));
    }

    .Fw400Fs11HexA0A2A1 {
        font-family: var(--font-lato);
        --tw-text-opacity: 1;
        font-weight: 400;
        color: rgb(111 113 112 / var(--tw-text-opacity));
    }

    .px-[16px] {
        padding-left: 16px;
        padding-right: 16px;
    }

    .rounded-l-full {
        border-top-left-radius: 9999px;
        border-bottom-left-radius: 9999px;
    }

    .w-full {
        width: 100%;
    }

    .mt-[16px] {
        margin-top: 16px;
    }

    @media (min-width: 1024px) {
        .desktop:my-[50px] {
            margin-top: 50px;
            margin-bottom: 50px;
        }

        .desktop:scroll-mt-[150px] {
            scroll-margin-top: 150px;
        }

        .desktop:max-w-[960px] {
            max-width: 960px;
        }

        .desktop:mx-auto {
            margin-left: auto;
            margin-right: auto;
        }

        .desktop:px-0 {
            padding-left: 0;
            padding-right: 0;
        }

        .desktop:gap-[8px] {
            gap: 8px;
        }

        .desktop:leading-[32px] {
            line-height: 32px;
        }

        .desktop:text-[28px] {
            font-size: 28px;
        }

        .desktop:text-[16px] {
            font-size: 16px;
        }

        .desktop:pt-[32px] {
            padding-top: 32px;
        }

        .desktop:pb-[32px] {
            padding-bottom: 32px;
        }

        .desktop:pb-[16px] {
            padding-bottom: 16px;
        }

        .desktop:gap-[24px] {
            gap: 24px;
        }

        .desktop:rounded-[16px] {
            border-radius: 16px;
        }

        .desktop:w-[220px] {
            width: 220px;
        }

        .desktop:h-[220px] {
            height: 220px;
        }

        .desktop:text-center {
            text-align: center;
        }

        .desktop:pt-[20px] {
            padding-top: 20px;
        }

        .desktop:!leading-[20px] {
            line-height: 20px !important;
        }

        .desktop:!font-bold {
            font-weight: 500 !important;
        }

        .desktop:!text-[18px] {
            font-size: 16px !important;
        }

        .desktop:!leading-[24px] {
            line-height: 24px !important;
        }

        .desktop:!text-[16px] {
            font-size: 15px !important;
        }

        .desktop:mt-[4px] {
            margin-top: 4px;
        }

        .desktop:pt-0 {
            padding-top: 0;
        }

        .desktop:border-0 {
            border-width: 0;
        }

        .desktop:mx-0 {
            margin-left: 0;
            margin-right: 0;
        }
    }

    @media (max-width: 768px) {
        p.Fw400Fs14Hex404543.!leading-[20px].desktop:!text-[18px].desktop:!leading-[20px].desktop:!font-bold {
            margin-top: 18px;
        }
    }
</style>

<div class="my-[30px] desktop:my-[50px] first:mt-0">
    <div class="scroll-mt-[130px] desktop:scroll-mt-[150px]">
        <div class="desktop:max-w-[960px] desktop:mx-auto">
            <div class="flex flex-col gap-[4px] px-[16px] desktop:px-0 desktop:gap-[8px]">
                <p
                    class="text-[20px] desktop:text-[28px] leading-[24px] desktop:leading-[32px] font-bold text-content-1">
                    Why Age Dependent</p>
                <p class="text-[14px] desktop:text-[16px] leading-[20px] font-normal text-content-5">Special Care for
                    Above 35</p>
            </div>
            <div>
                <div class="pb-[16px] desktop:pb-[32px] pt-[24px] desktop:pt-[32px]">
                    <div
                        class="flex gap-[12px] overflow-x-scroll  nav-scrollbar desktop:gap-[24px] desktop:pb-[16px] px-[16px] desktop:px-0">
                        <div class="w-min">
                            <div style="background-color:#E9F3F5"
                                class="relative w-[140px] h-[140px] rounded-[8px] overflow-hidden  desktop:w-[220px] desktop:h-[220px] desktop:rounded-[16px] border-darkWhite border">
                                <img alt="ingredient" loading="lazy" decoding="async" data-nimg="fill"
                                    class="object-cover"
                                    style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent"
                                    sizes="30vw"
                                    srcset="https://nathabit.in/_nat/images/close_up_skin_pores_face_care_routine_1_f0e8284c19.jpeg?format=auto&width=256&quality=75 256w, https://nathabit.in/_nat/images/close_up_skin_pores_face_care_routine_1_f0e8284c19.jpeg?format=auto&width=384&quality=75 384w, https://nathabit.in/_nat/images/close_up_skin_pores_face_care_routine_1_f0e8284c19.jpeg?format=auto&width=640&quality=75 640w, https://nathabit.in/_nat/images/close_up_skin_pores_face_care_routine_1_f0e8284c19.jpeg?format=auto&width=750&quality=75 750w, https://nathabit.in/_nat/images/close_up_skin_pores_face_care_routine_1_f0e8284c19.jpeg?format=auto&width=828&quality=75 828w, https://nathabit.in/_nat/images/close_up_skin_pores_face_care_routine_1_f0e8284c19.jpeg?format=auto&width=1080&quality=75 1080w, https://nathabit.in/_nat/images/close_up_skin_pores_face_care_routine_1_f0e8284c19.jpeg?format=auto&width=1200&quality=75 1200w, https://nathabit.in/_nat/images/close_up_skin_pores_face_care_routine_1_f0e8284c19.jpeg?format=auto&width=1920&quality=75 1920w"
                                    src="https://nathabit.in/_nat/images/close_up_skin_pores_face_care_routine_1_f0e8284c19.jpeg?format=auto&width=1920&quality=75">
                            </div>
                            <div class="pt-[16px] desktop:pt-[20px] desktop:text-center">
                                <p
                                    class="Fw400Fs14Hex404543 !leading-[20px] desktop:!text-[18px] desktop:!leading-[20px] desktop:!font-bold">
                                    Sebum secretion declines</p>
                                <p
                                    class="Fw400Fs12HexA0A2A1 !text-content-5 desktop:!text-[16px] desktop:!leading-[24px] desktop:mt-[4px]">
                                    Aging, dryness & damage slowdown & repair is required.</p>
                            </div>
                        </div>
                        <div class="w-min">
                            <div style="background-color:#F2F8F9"
                                class="relative w-[140px] h-[140px] rounded-[8px] overflow-hidden  desktop:w-[220px] desktop:h-[220px] desktop:rounded-[16px] border-darkWhite border">
                                <img alt="ingredient" loading="lazy" decoding="async" data-nimg="fill"
                                    class="object-cover"
                                    style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent"
                                    sizes="30vw"
                                    srcset="https://nathabit.in/_nat/images/macro_shot_acne_scars_face_young_black_woman_looking_camera_3482b7c4ee.jpeg?format=auto&width=256&quality=75 256w, https://nathabit.in/_nat/images/macro_shot_acne_scars_face_young_black_woman_looking_camera_3482b7c4ee.jpeg?format=auto&width=384&quality=75 384w, https://nathabit.in/_nat/images/macro_shot_acne_scars_face_young_black_woman_looking_camera_3482b7c4ee.jpeg?format=auto&width=640&quality=75 640w, https://nathabit.in/_nat/images/macro_shot_acne_scars_face_young_black_woman_looking_camera_3482b7c4ee.jpeg?format=auto&width=750&quality=75 750w, https://nathabit.in/_nat/images/macro_shot_acne_scars_face_young_black_woman_looking_camera_3482b7c4ee.jpeg?format=auto&width=828&quality=75 828w, https://nathabit.in/_nat/images/macro_shot_acne_scars_face_young_black_woman_looking_camera_3482b7c4ee.jpeg?format=auto&width=1080&quality=75 1080w, https://nathabit.in/_nat/images/macro_shot_acne_scars_face_young_black_woman_looking_camera_3482b7c4ee.jpeg?format=auto&width=1200&quality=75 1200w, https://nathabit.in/_nat/images/macro_shot_acne_scars_face_young_black_woman_looking_camera_3482b7c4ee.jpeg?format=auto&width=1920&quality=75 1920w"
                                    src="https://nathabit.in/_nat/images/macro_shot_acne_scars_face_young_black_woman_looking_camera_3482b7c4ee.jpeg?format=auto&width=1920&quality=75">
                            </div>
                            <div class="pt-[16px] desktop:pt-[20px] desktop:text-center">
                                <p
                                    class="Fw400Fs14Hex404543 !leading-[20px] desktop:!text-[18px] desktop:!leading-[20px] desktop:!font-bold">
                                    Imbalanced melanin</p>
                                <p
                                    class="Fw400Fs12HexA0A2A1 !text-content-5 desktop:!text-[16px] desktop:!leading-[24px] desktop:mt-[4px]">
                                    Clearance of pigmentation, blemish & tan due to cell damage & high melanin.
                                </p>
                            </div>
                        </div>
                        <div class="w-min">
                            <div style="background-color:#F2F8F9"
                                class="relative w-[140px] h-[140px] rounded-[8px] overflow-hidden  desktop:w-[220px] desktop:h-[220px] desktop:rounded-[16px] border-darkWhite border">
                                <img alt="ingredient" loading="lazy" decoding="async" data-nimg="fill"
                                    class="object-cover"
                                    style="position:absolute;height:100%;width:100%;left:0;top:0;right:0;bottom:0;color:transparent"
                                    sizes="30vw"
                                    srcset="https://nathabit.in/_nat/images/troubled_woman_doing_software_quality_assurance_finding_major_errors_6589361cf1.jpeg?format=auto&width=256&quality=75 256w, https://nathabit.in/_nat/images/troubled_woman_doing_software_quality_assurance_finding_major_errors_6589361cf1.jpeg?format=auto&width=384&quality=75 384w, https://nathabit.in/_nat/images/troubled_woman_doing_software_quality_assurance_finding_major_errors_6589361cf1.jpeg?format=auto&width=640&quality=75 640w, https://nathabit.in/_nat/images/troubled_woman_doing_software_quality_assurance_finding_major_errors_6589361cf1.jpeg?format=auto&width=750&quality=75 750w, https://nathabit.in/_nat/images/troubled_woman_doing_software_quality_assurance_finding_major_errors_6589361cf1.jpeg?format=auto&width=828&quality=75 828w, https://nathabit.in/_nat/images/troubled_woman_doing_software_quality_assurance_finding_major_errors_6589361cf1.jpeg?format=auto&width=1080&quality=75 1080w, https://nathabit.in/_nat/images/troubled_woman_doing_software_quality_assurance_finding_major_errors_6589361cf1.jpeg?format=auto&width=1200&quality=75 1200w, https://nathabit.in/_nat/images/troubled_woman_doing_software_quality_assurance_finding_major_errors_6589361cf1.jpeg?format=auto&width=1920&quality=75 1920w"
                                    src="https://nathabit.in/_nat/images/troubled_woman_doing_software_quality_assurance_finding_major_errors_6589361cf1.jpeg?format=auto&width=1920&quality=75">
                            </div>
                            <div class="pt-[16px] desktop:pt-[20px] desktop:text-center">
                                <p
                                    class="Fw400Fs14Hex404543 !leading-[20px] desktop:!text-[18px] desktop:!leading-[20px] desktop:!font-bold">
                                    Cellular degradation</p>
                                <p
                                    class="Fw400Fs12HexA0A2A1 !text-content-5 desktop:!text-[16px] desktop:!leading-[24px] desktop:mt-[4px]">
                                    Skin tightening & radiant glow to compensate for degradation associated with
                                    age, fatigue & stress.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div
                    class="pt-[16px] desktop:text-center mx-[16px] border-t border-categoryDivider desktop:border-0 desktop:mx-0 desktop:pt-0">
                    <p class="Fw400Fs11HexA0A2A1 !leading-[16px] desktop:!text-[16px] desktop:!leading-[24px]"></p>
                </div>
                <div style="background:linear-gradient(89.87deg, #FFFAF5 4.36%, rgba(255, 250, 245, 0) 100.7%)"
                    class="w-full mt-[16px] rounded-l-full px-[16px]"></div>
            </div>
        </div>
    </div>
</div>