.main-container {
    overflow-x: hidden;
}

.care-about-block {
    padding: var(--space-80) var(--space-36);
    background: var(--background-02);

    .inner-container {
        max-width: 1296px;
        display: flex;
        flex-direction: column;
        margin: 0 auto;
        gap: var(--space-40);

        .title-description {
            display: flex;
            flex-direction: column;
            gap: var(--space-16);

            h2 {
                color: var(--text-primary);
                text-align: center;
                font-family: BOG, sans-serif;
                font-size: 32px;
                font-style: normal;
                font-weight: 700;
                line-height: 48px;
            }

            .description {
                max-width: 736px;
                margin: 0 auto;

                p {
                    color: var(--text-primary);
                    text-align: center;
                    font-family: BOG, sans-serif;
                    font-size: 18px;
                    font-style: normal;
                    font-weight: 500;
                    line-height: 30px;
                }
            }
        }

        .care-about {
            position: relative;
            width: 100%;
            overflow: visible;
            -ms-overflow-style: none;
            scrollbar-width: none;
            display: flex;
            flex-direction: column;
            gap: var(--space-40);

            &::-webkit-scrollbar {
                display: none;
            }

            .swiper-pagination {
                position: static;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: var(--space-16);
                width: fit-content;
                margin: 0 auto;
                padding: 0;

                .swiper-pagination-bullet {
                    width: fit-content;
                    height: fit-content;
                    margin: 0;
                    padding: var(--space-16) var(--space-24);
                    border-radius: var(--border-radius-100);
                    background: var(--invert-background-solid-30);
                    opacity: 1;
                    text-wrap: nowrap;
                    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10);
                    transition: background 0.3s ease;

                    &.swiper-pagination-bullet-active {
                        background-color: var(--primary-solid-10);
                        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.10);

                        span {
                            color: var(--white-tr-20);
                        }
                    }

                    span {
                        color: var(--invert-component-tr-20);
                        text-align: center;
                        font-family: BOG, sans-serif;
                        font-size: 13px;
                        font-style: normal;
                        font-weight: 500;
                        line-height: 18px;
                        text-transform: uppercase;
                        display: block;
                    }
                }
            }

            .swiper-wrapper {
                display: grid;
                grid-auto-flow: column;
                grid-auto-columns: max-content;
                -ms-overflow-style: none;
                scrollbar-width: none;
                padding: 0;

                &::-webkit-scrollbar {
                    display: none;
                }

                .card {
                    display: flex;
                    align-items: center;
                    width: 1076px;
                    max-width: calc(100dvw - 72px);
                    padding: var(--space-72) var(--space-64) var(--space-72) var(--space-48);
                    gap: var(--space-56);
                    border-radius: var(--border-radius-24);
                    background-color: var(--invert-background-solid-40);
                    overflow: hidden;
                    transition: background-color 0.3s ease;

                    .card-image {
                        width: 56%;
                        max-width: 502px;

                        img {
                            width: 100%;
                            height: auto;
                            border-radius: var(--border-radius-24);
                            overflow: hidden;
                        }
                    }

                    .card-content {
                        display: flex;
                        flex-direction: column;
                        gap: var(--space-12);
                        width: 44%;

                        .card-title {
                            color: var(--invert-component-tr-30);
                            font-family: BOG, sans-serif;
                            font-size: 24px;
                            font-style: normal;
                            font-weight: 700;
                            line-height: 36px;
                        }

                        .card-description {
                            p {
                                color: var(--text-primary);
                                font-family: BOG, sans-serif;
                                font-size: 16px;
                                font-style: normal;
                                font-weight: 400;
                                line-height: 24px;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 1024px) {
    .care-about-block .inner-container {
        gap: var(--space-32);

        .care-about {
            gap: var(--space-32);

            .swiper-wrapper {
                .card {
                    width: 952px;
                    padding: var(--space-72) var(--space-64);

                    .card-image {
                        max-width: 384px;
                    }
                }
            }
        }
    }
}

@media (max-width: 768px) {
    .care-about-block {
        padding: var(--space-80) var(--space-28);

        .inner-container {
            gap: var(--space-32);

            .care-about .swiper-wrapper .card {
                padding: var(--space-24);
                padding-bottom: var(--space-40);
                flex-direction: column-reverse;
                width: calc(100dvw - 56px);
                max-width: unset;
                height: 100%;
                justify-content: space-between;
                gap: var(--space-32);

                .card-image {
                    width: 100%;
                    max-width: unset;
                    height: 280px;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        object-position: center;
                    }
                }

                .card-content {
                    width: 100%;
                    max-width: unset;
                }
            }
        }
    }
}

@media (max-width: 600px) {
    .care-about-block {
        padding: var(--space-64) var(--space-24);

        .inner-container {
            .title-description {
                .section-title {
                    font-size: 22px;
                    line-height: 34px;
                }

                .description p {
                    font-size: 16px;
                    font-weight: 400;
                    line-height: 24px
                }
            }

            .care-about {
                gap: var(--space-28);

                .swiper-pagination {
                    width: 100dvw;
                    padding: 0 var(--space-28) var(--space-4);
                    flex-wrap: nowrap;
                    overflow-x: auto;
                    justify-content: flex-start;
                    -ms-overflow-style: none;
                    scrollbar-width: none;
                    z-index: 100;
                    margin-left: -28px;
                }

                .swiper-wrapper .card {
                    width: calc(100dvw - 48px);

                    .card-content .card-title {
                        font-size: 18px;
                        line-height: 30px;
                    }
                }
            }
        }
    }
}