.how-it-works-section {

    & .content {
        padding-top: 0 !important;
    }

    /* Typography */
    --Caption-Size: 14px;
    --Caption-Weight: 400;
    --Caption-Heigt: 16px;
    --Caption-Letter-spacing: 0;
    --Light-gold: #F5F5DC;
    --White: #FFFFFF;
    --Pure-gold: linear-gradient(90deg, rgba(150, 131, 104, 0.9) 0%, rgba(225, 202, 154, 0.9) 52.4%, rgba(150, 131, 104, 0.9) 100%);

    background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    radial-gradient(60.63% 60.63% at 50% 50%, #01184C 13.46%, #000417 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;

    display: flex;
    justify-content: center;
    padding: 64px 16px 0;

    @media screen and (max-width: 966px) {
        padding-top: 32px;
    }

    & .how-it-work {
        display: none;
        max-width: 1440px;

        &.active {
            display: flex;
            flex-direction: column;
        }

        & .badge {
            font-size: var(--Caption-Size, 14px);
            font-style: normal;
            font-weight: var(--Caption-Weight, 400);
            line-height: var(--Caption-Heigt, 16px); /* 114.286% */
            color: var(--Light-gold);
            letter-spacing: var(--Caption-Letter-spacing, 0);
            text-transform: uppercase;
            @media screen and (max-width: 612px) {
                text-align: center;
            }
        }

        & .tab-buttons {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
            margin-top: 20px;
            align-items: center;

            & .tab-button {
                color: rgba(222, 232, 248, 1);
                border: 1px solid rgba(222, 232, 248, 1);
                background: transparent;
                text-transform: uppercase;
                font-size: 32px;
                font-weight: 600;
                padding: 21px 8px;
                width: 100%;
                cursor: pointer;

                &.active {
                    color: rgba(184, 177, 149, 1);
                    border: 1px solid rgba(184, 177, 149, 1);
                }

                @media screen and (max-width: 1110px) {
                    font-size: 25px;
                }
                @media screen and (max-width: 966px) {
                    font-size: 16px;
                    padding: 13px 8px;
                }
            }

            @media screen and (max-width: 612px) {
                gap: 8px;
                margin-top: 8px;
                align-items: stretch;
            }
        }

        & .tab-content {
            margin-top: 32px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
            @media screen and (max-width: 966px) {
                display: flex;
                flex-direction: column;
                margin-top: 20px;
                gap: 20px;
            }

            & .content {
                display: flex;
                flex-direction: column;
                gap: 48px;
                @media screen and (max-width: 966px) {
                    order: 1;
                    gap: 20px;
                }

                & .points {
                    display: flex;
                    flex-direction: column;
                    gap: 24px;
                    @media screen and (max-width: 966px) {
                        gap: 16px;
                    }

                    & .point {
                        display: flex;
                        flex-direction: column;

                        & .point-header {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            gap: 8px;
                            font-size: 36px;
                            font-weight: 400;
                            line-height: 36px;
                            cursor: pointer;
                            color: var(--Light-gold);

                            & h3 {
                                margin: 0;
                                font-size: 36px;
                                font-weight: 400;
                                @media screen and (max-width: 1024px) {
                                    font-size: 30px;
                                }

                                @media screen and (max-width: 966px) {
                                    font-size: 22px;

                                }
                            }

                            & p {
                                margin: 0;
                                font-size: 30px;

                            }
                        }

                        & .point-separator {
                            background: var(--Pure-gold);
                            height: 1px;
                            width: 100%;
                            margin-top: 8px;
                            margin-bottom: 16px;
                        }

                        & .point-description {

                            font-size: 16px;
                            font-weight: 300;
                            color: var(--Light-gold);
                            display: none;

                            @media screen and (max-width: 1024px) {
                                font-size: 14px;
                            }
                        }

                        &.active {
                            & .point-description {
                                display: block;
                            }
                        }
                    }
                }

                & .button-link {
                    background: var(--Pure-gold);
                    color: var(--White);
                    text-decoration: none;
                    text-align: center;
                    padding: 11.5px 11px;
                    text-transform: uppercase;
                    font-size: 18px;
                    font-weight: 700;
                    width: fit-content;
                    margin-bottom: 64px;
                    @media screen and (max-width: 966px) {
                        margin-bottom: 32px;
                        width: auto;
                    }
                }
            }

            & .media {
                display: flex;
                justify-content: end;
                position: relative;
                box-sizing: border-box;
                @media screen and (max-width: 966px) {
                    order: 0;
                    display: block;
                }

                &.table {
                    border: 1px solid transparent;
                    border-image-source: var(--Pure-gold);
                    border-image-slice: 1;
                    padding: 32px 48px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    gap: 32px;

                    @media (max-width: 728px) {
                        padding: 20px;
                    }

                    &:after {
                        content: "";
                        position: absolute;
                        top: 0;
                        left: 50%;
                        width: 2px;
                        height: 100%;
                        background: var(--Pure-gold);
                        transform: translateX(-50%) scaleX(0.5);
                        transform-origin: center;
                    }

                    & .table-item {
                        display: flex;
                        justify-content: space-between;
                        width: 100%;



                        &.mobile-hidden {
                            display: none;
                        }

                        & p, span, img {
                            width: 33%;
                        }

                        & span {
                            text-transform: uppercase;
                            color: #fff;
                            font-size: 20px;
                            font-weight: 600;
                        }

                        & p {
                            font-size: 16px;
                            color: rgba(222, 232, 248, 1);
                            font-weight: 400;
                            margin: 0;
                            display: flex;
                            align-items: center;
                            @media (max-width: 728px) {
                                font-size: 10px;
                            }
                        }

                        & div {
                            text-align: center;
                            margin-top: auto;
                            margin-bottom: auto;
                            padding: 10px;
                            text-transform: uppercase;
                            color: #fff;
                            font-size: 20px;
                            font-weight: 400;
                            border: 1px solid transparent;
                            border-image-source: var(--Pure-gold);
                            border-image-slice: 1;
                            background: rgba(1, 23, 71, 1);
                            z-index: 9;
                            @media (max-width: 728px) {
                                font-size: 12px;
                                padding: 4px
                            }
                        }
                    }
                }

                & .press-split__reel {
                    max-height: unset;
                    position: absolute;
                    top: 0;
                    right: 0;
                    height: 100%;
                    @media screen and (max-width: 966px) {
                        position: unset;
                        max-height: 373px;
                        width: 100%;
                    }
                }

                & .press-split__video {
                    max-height: unset;
                    height: 100%;
                    width: 100%;
                }

                & .reel__video {
                    position: unset;
                    width: 100%;
                }
            }

            &.left {
                @media screen and (min-width: 966px) {
                    & .content {
                        order: 2;
                    }

                    & .media {
                        order: 1;
                    }

                    & .media.table {
                        margin-bottom: 64px;
                    }

                    & .press-split__reel {
                        left: 0;
                    }
                }
            }
        }
    }

}