.paragraph:has(.swiper.view-brand-models) {
    padding: var(--section-padding) var(--grid-padding);

    display: grid;
    grid-template-areas: "header links" "slider slider";
    grid-template-columns: 1fr auto;

    @media(max-width: 768px) {
        display: flex;
        flex-direction: column;
    }

    .header {
        grid-area: header;

        .text-formatted {
            >* {
                max-width: 770px;
                box-sizing: content-box !important;
            }
        }
    }

    .links {
        display: flex;
        align-items: center;
        grid-area: links;
        gap: 4px;
        margin-left: auto;

        @media(max-width: 768px) {
            margin-top: 10px;
            width: 100%;

            >* {
                flex: 1;
            }
        }
    }


    >.field--name-field-view {
        margin-top: 27px;
        grid-area: slider;
    }



    .views-row {
        position: relative;

        .field--name-title {
            margin-bottom: 6px;

            >* {
                font-size: var(--font-size-20);
                font-weight: var(--font-semibold);
                color: var(--color-blue-2);
            }
        }

        .field--name-field-price-starting-from {
            font-size: var(--font-size-16);
            font-weight: var(--font-medium);
            color: var(--color-gray-4);
        }

        .field--name-field-picture {
            pointer-events: none;
            user-select: none;
            margin: calc(-0 * calc(70 / var(--base-font-size) * 1rem)) 0;

            @media(max-width: 768px) {
                margin: calc(-0 * calc(50 / var(--base-font-size) * 1rem)) 0;
            }

        }

        .text-formatted {
            padding: 20px 0 0;
            overflow: hidden;

            p {
                font-size: var(--font-size-16);
                font-weight: var(--font-light);
                color: var(--color-gray-10);
                line-height: 1.5;
            }

            ul {
                font-size: var(--font-size-16);
                color: var(--color-blue-2);
                font-weight: var(--font-semibold);

                strong {
                    font-weight: var(--font-semibold);
                }
            }
        }

        .buttonContainer {
            position: relative;
            margin-top: 8px;

            &::after {
                z-index: 1;
                content: "";
                position: absolute;
                left: 0;
                bottom: 50%;
                width: 100%;
                height: 1px;
                background-color: #DBDBDB;
            }

            &::before {
                z-index: 1;
                position: absolute;
                top: -150%;
                left: 0;
                content: "";
                width: 100%;
                height: 150%;
                background: rgb(255, 255, 255);
                background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(0, 212, 255, 0) 100%);
                opacity: 1;
                /* transform: translate(-50%, 0); */
                transition: all ease 0.4s;
            }

            &:has(.squeeze-button.is-active) {
                &::before {
                    opacity: 0;
                }
            }
        }

        .squeeze-button {
            display: block;
            border: none;
            outline: none;
            margin: 0 auto;
            width: 54px;
            height: 28px;
            border-radius: 100px;
            background-color: #F3C5B3;
            cursor: pointer;
            position: relative;
            z-index: 10;



            &::after {
                z-index: -1;
                content: '';
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                width: 14px;
                height: 10px;
                background: url("../../images//icons/chevron-orange.svg");
                background-position: center;
                background-size: cover;
            }

            &.is-active {
                &::after {
                    transform: translate(-50%, -50%) rotate(180deg);
                }
            }
        }

        .field--name-body {
            transition: max-height 1s ease-in-out;
            display: grid;
            grid-template-rows: auto;
            position: relative;
            overflow: hidden;

            &:not(.is-active) {
                max-height: calc(100px + 3 * 1.5 * 16px) !important;
            }

            p {
                max-height: 100%;
                overflow: hidden;
                margin-bottom: 10px;
                line-height: 1.5;
            }

            &.is-active {
                max-height: inherit;
            }
        }
    }
}