.script-videos {
    position: relative;
    overflow-x: clip;
    .container {
        .title {
            h1 {
                font-size: var(--fs-6xl);
                margin: 0 0 20px;
                line-height: 80%;
                max-width: 800px;
                letter-spacing: -6px;
                @media (max-width: 1024px) {
                    font-size: var(--fs-5xl);
                    letter-spacing: -2px;
                }
            }
            .text {
                margin-bottom: 64px;
                max-width: 596px;
                @media (max-width: 1024px) {
                    margin-bottom: 36px;
                }
                @media (max-width: 1024px) {
                    margin-bottom: 20px;
                }
            }
        }

        .video-display {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 55px;
            margin-bottom: 88px;
            @media (max-width: 1024px) {
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 36px;
                margin-bottom: 16px;
            }
            .video-wrapper {
                flex: 1;
                aspect-ratio: 16 / 9;
                max-width: 100%;
                border: 1px solid var(--c-gray-900);
                border-radius: 45px;
                overflow: hidden;

                @media (max-width: 1024px) {
                    margin-inline: -20px;
                    border-radius: 0;
                    max-width: none;
                    width: 100vw;
                }

                &.large {
                    aspect-ratio: 864 / 740;
                }

                iframe,
                video {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
            ul {
                margin: 0;
                list-style: none;
                width: 400px;
                max-width: 400px;

                @media (max-width: 1024px) {
                    width: 100%;
                }

                .list-header {
                    width: 100%;
                    border-radius: 30px 30px 0 0;
                    background-color: var(--c-gray-900);
                    color: var(--c-white);
                    padding: 15px 46px;
                    margin-bottom: 20px;

                    h4 {
                        margin-block: 0 6px;
                        font-size: 40px;
                    }
                    span {
                        font-style: italic;
                    }
                }
                li {
                    border: 1px solid #c1b4a3;
                    color: #c1b4a3;
                    text-transform: uppercase;
                    border-radius: 0;
                    font-family: var(--ff-fibbl);
                    margin-bottom: 20px;
                    transition: all 0.2s ease;
                    cursor: pointer;

                    &:last-child {
                        border-radius: 0 0 30px 30px;
                    }
                    a {
                        padding: 24px 30px 30px 30px;
                        display: flex;
                        align-items: center;
                        gap: 12px;
                        font-size: 20px;
                        @media (max-width: 1024px) {
                            font-size: 20px;
                        }
                    }

                    &:hover {
                        border-radius: 15px;
                        border: 1px solid transparent;
                        color: #64594f;
                        box-shadow: 3px 4px 12px rgba(0, 0, 0, 0.05), 13px 16px 21px rgba(0, 0, 0, 0.04), 30px 37px 28px rgba(0, 0, 0, 0.03), 53px 65px 33px rgba(0, 0, 0, 0.01);
                        a {
                            color: #64594f;
                        }
                        svg {
                            path {
                                stroke: #64594f;
                            }
                        }
                    }
                }
            }
        }
        .code-bottom {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;

            @media (max-width: 1024px) {
                grid-template-columns: repeat(1, 1fr);
            }
        }
        .fibbl_lists {
            max-width: 530px;
            margin-bottom: 90px;
            @media (max-width: 1024px) {
                width: 100vw;
                border-top: 1px solid var(--c-black);
                border-bottom: 1px solid var(--c-black);
                margin-inline: -20px;
                margin-bottom: 0;
                padding: 12px 40px;
                max-width: none;
            }
            ul {
                li {
                    text-transform: uppercase;
                }
            }
        }

        .code-block {
            background: none;
            color: #9b8f82;
            font-size: 15px;
            padding: 0;
            margin: 0;
            position: relative;
            @media (max-width: 1024px) {
                display: none;
            }
            .code-lines {
                list-style: decimal-leading-zero;
                margin: 0;
                background: none;
                counter-reset: line;
                list-style: none;
                padding-left: 40px;

                li {
                    background: none;
                    position: relative;
                    white-space: pre;
                    padding-left: 40px;
                    line-height: 84%;

                    .indent {
                        padding-left: 2ch;
                    }
                    .indent-4 {
                        padding-left: 4ch;
                    }

                    &::before {
                        counter-increment: line;
                        content: counter(line, decimal-leading-zero);
                        position: absolute;
                        font-variant-numeric: tabular-nums;
                        font-feature-settings: 'tnum';
                        left: -2.5em;
                        width: 2em;
                        text-align: right;
                        color: #9b8f82;
                        font-weight: normal;
                    }
                }
            }
            .tip {
                position: absolute;
                right: 100px;
                bottom: 20px;
                display: flex;
                flex-direction: column;
                align-items: flex-end;
                gap: 14px;
                font-family: var(--ff-fibbl);

                svg {
                    margin-right: 40px;
                }
            }
        }
    }
    .shoe {
        position: absolute;
        right: -10vw;
        top: 80%;
        transform: translateY(-50%);
        width: 50vw;
        max-width: 877px;
        aspect-ratio: 1/1;
        height: auto;
        z-index: 1;
        pointer-events: none;
        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }
    &.reverse {
        .container {
            .video-display {
                flex-direction: row-reverse;
                @media (max-width: 1024px) {
                    flex-direction: column;
                }
            }
        }
    }
}