@use "../common/utils" as *;
@use "../common/mixins" as *;

.klantenservice {
    &__sidebar {


        @include media-breakpoint-up(lg) {
            padding: calc-rem(45px 40px);
            border: calc-rem(1px) solid rgba(var(--color-border));
            border-radius: var(--border-radius);
            height: 100%;
        }

        .title {
            font-size: clamp-font(16px, 18px);
        }

        hr {
            margin-block: calc-rem(30px);

            @include media-breakpoint-up(lg) {
                margin-block: calc-rem(40px);
            }
        }

        address {
            font-style: normal;

            .wrapper {
                display: flex;
                gap: calc-rem(10px);
                margin-top: calc-rem(25px);

                .icon-wrapper {
                    background: rgba(var(--color-primary));
                    width: calc-rem(35px);
                    height: calc-rem(35px);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border-radius: 100%;
                    flex: none;

                    @include media-breakpoint-up(lg) {
                        width: calc-rem(45px);
                        height: calc-rem(45px);
                    }

                    svg {
                        height: calc-rem(14px);
                        width: calc-rem(14px);
                        flex: none;
                    }
                }

                .contact-info {
                    margin-top: calc-rem(13px);

                    small {
                        font-size: clamp-font(12px, 14px);
                        line-height: 1;
                        font-variation-settings: var(--font-variation-settings-bold);
                        margin-bottom: calc-rem(15px);
                        display: inline-block;
                    }

                    p {
                        font-size: clamp-font(12px, 14px);
                    }

                    a:not(.button--arrow) {
                        text-decoration: underline;
                        font-variation-settings: var(--font-variation-settings-bold);
                        font-size: clamp-font(12px, 14px);
                        color: rgba(var(--color-primary));

                    }
                }
            }


        }
    }

    &__banner {
        width: 100%;
        height: auto;
        aspect-ratio: aspect-ratio(970, 260);
        border-radius: var(--border-radius);
        overflow: hidden;
        margin-bottom: calc-rem(30px);

        @include media-breakpoint-up(lg) {
            margin-bottom: 0;
        }

        &.mobile {
            @include media-breakpoint-up(lg) {
                display: none;
            }
        }

        &.desktop {
            display: none;

            @include media-breakpoint-up(lg) {
                display: block;
            }
        }

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

    &__faq {
        margin-top: calc-rem(90px);

        @include media-breakpoint-up(lg) {
            padding: calc-rem(45px 40px);
            border: calc-rem(1px) solid rgba(var(--color-border));
            border-radius: var(--border-radius);
            margin-top: calc-rem(30px);
        }

        .button--arrow {
            margin-top: calc-rem(40px);

            @include media-breakpoint-up(lg) {
                justify-content: flex-end;
            }
        }
    }

}
