&.v5 {
    :not(.material-icons) {
        font-family: $font_open_sans;
    }

    @media only screen and (max-width: $max_screen_xs) {
        --background-image: url('#{$image_path}section-v5-bg.png');
        --body-bg-color: #212121;
        --introduction-bg-color: transparent;
        --allocation-table-bg-color: transparent;
        --custom-features-bg: transparent;

        --ribbon-top-position: -15px;

        --ribbon-end-url: #{$special_ribbon_end};
        --ribbon-start-url: #{$special_ribbon_start};

        --clickout-btn-background: linear-gradient(180deg, #FFCA43 0%, #FFA500 100%), linear-gradient(0deg, #FEA500, #FEA500), linear-gradient(180deg, #FFCA43 0%, #FFA500 100%);
        --clickout-btn-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
        --custom-features-font-color: #424242;

        .site-header .site-header__row--first .nav-mobile {
            --body-font-color: #000;
        }

        .introduction {
            background: var(--background-image);
            background-size: cover;
            background-repeat: no-repeat;
            background-position: bottom;
            .introduction {
                &__title {
                    color: #fff;
                    max-width: unset;
                }
            }
        }

        .allocation-container tbody tr {
            @include box-shadow (0px 1px 20px rgba(117, 128, 162, 0.15));
            @include border-radius(8px);
            position: relative;
            display: grid;
            grid-template-areas: 
                'partner custom-features'
                'partner clickout'
            ;
            grid-template-columns: 50% 50%;
            background: #fff;
            padding: 8px 16px;

            &:not(:first-child) {
                margin-top: 8px;
            }
            td {
                &.partner {
                    margin: 0;
                    > div {
                        display: flex;
                        flex-direction: column;
                        height: 100%;
                        .partner_logo, .clickout {
                            &, > img {
                                max-height: 85px;
                                object-fit: contain;
                            }
                        }
                        .star-rating-box {
                            margin-top: auto;
                        }
                        .ribbon {
                            @include flex-center;
                            @include font(14px, null, 14px);
                            background: linear-gradient(90deg, #FFA500 0%, #FFD700 100%);
                            height: 30px;
                            padding-inline-start: 0;
                            inset-inline-start: -1px;
                            &::before {
                                height: 43px;
                            }
                            &::after {
                                height: 33px;
                            }
                        }
                    }
                }

                &.clickout {
                    margin: 10px 0 0;
                    > div {
                        padding: 0;
                        .button {
                            color: #000;
                            text-transform: uppercase;
                            font-weight: 700;
                            background: var(--clickout-btn-background);
                            &::after{
                                content: none;
                            }
                        }

                        .review {
                            display: none;
                        }
                    }
                }

                &.custom-features {
                    @include flex(center, center);
                    text-align: center;
                    > div {
                        padding: 0;
                        background: transparent;
                        ul {
                            li {
                                flex-direction: column;
                                font-size: 24px;
                                font-weight: 700;
                                .label {
                                    font-size: 16px;
                                    font-weight: 500;
                                }
                                i {
                                    min-height: 24px;
                                    color: #FFA500;
                                    font-size: 24px;
                                    margin: 0 0 4px;
                                }
                            }
                        }
                    }
                }

                .review {
                    color: #3372F6;
                }

                // border between sections
                &.partner {
                    padding-inline-end: 16px;
                    padding-top: 8px;
                    padding-bottom: 8px;
                    border-inline-end: 1px solid #E0E0E0;
                }

                &.clickout, &.custom-features{
                    padding-inline-start: 16px;
                }
                &.custom-features{
                    padding-top: 8px;
                }
                &.clickout {
                    padding-bottom: 8px;
                }
            }
        }
    }

    // Mobile Rotation
    &.mobile {
        @media only screen and (min-width: $max_screen_xs) and (orientation: landscape) {
            --background-image: url('#{$image_path}section-v5-bg-landpace.png');

            --ribbon-top-position: -15px;
            --ribbon-end-url: #{$special_ribbon_end};
            --ribbon-start-url: #{$special_ribbon_start};

            --clickout-btn-background: linear-gradient(180deg, #FFCA43 0%, #FFA500 100%), linear-gradient(0deg, #FEA500, #FEA500), linear-gradient(180deg, #FFCA43 0%, #FFA500 100%);

            --custom-features-bg: transparent;
            --custom-features-font-color: #212121;

            --td-partner-width: 100%;
            --td-features-width: 100%;
            --td-clickout-width: 100%;

            .introduction {
                background: var(--background-image);
                background-size: cover;
                background-repeat: no-repeat;
                background-position: bottom;
                .introduction {
                    &__title {
                        color: #fff;
                    }
                }
            }

            .allocation-container {
                tbody {
                    display: grid;
                    gap: 8px;
                    
                    tr {
                        @include border-radius(8px);
                        display: grid;
                        grid-template-columns: 1fr 2fr 1.5fr;
                        grid-template-areas: 'partner custom-features clickout';
                        background: #fff;
                    }

                    td {
                        &.partner,
                        &.clickout,
                        &.custom-features {
                            padding: 16px;
                        }
                        &.partner {
                            > div {
                                .ribbon {
                                    @include flex-center;
                                    @include font(14px, null, 14px);
                                    background: linear-gradient(90deg, #FFA500 0%, #FFD700 100%);
                                    height: 30px;
                                    padding-inline-start: 0;
                                    inset-inline-start: -1px;
                                    &::before {
                                        height: 43px;
                                    }
                                    &::after {
                                        height: 33px;
                                    }
                                }
                            }
                            .review {
                                display: none;
                            }
                        }
                        &.clickout {
                            @include flex-center();
                            > div {
                                flex-basis: 100%;
                                padding: 0;

                                &:has(.review) {
                                    .button {
                                        margin-top: 20px;
                                    }
                                }
                                .button {
                                    color: #000;
                                    text-transform: uppercase;
                                    font-weight: 700;
                                    max-width: unset;
                                    background: var(--clickout-btn-background);
                                    &::after {
                                        content: none;
                                    }
                                }
                            }
                        }
                        &.custom-features {
                            position: relative;
                            @include flex-center();
                            &:before {
                                @include position(absolute, null, null, null, 16px);
                                content: "";
                                width: 1px;
                                height: calc(100% - 16px);
                                display: block;
                                background: #E0E0E0;
                            }
                            > div {
                                ul {
                                    li {
                                        gap: 8px;
                                        font-weight: 700;
                                        font-size: 32px;
                                        .label {
                                            font-size: 24px;
                                            font-weight: 400;
                                            line-height: 120%;
                                        }
                                        i {
                                            min-height: 28px;
                                            font-size: 28px;
                                            color: #FFA500;
                                            margin-inline-end: 0;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}