@scope (.card) {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: var(--space-2);

    background: var(--white);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    box-shadow: var(--shadow-2);

    & .header {
        width: 100%;

        & .title {
            font-size: var(--font-size-6xl);
            line-height: var(--line-head-6xl);
            font-weight: var(--font-weight-semibold);

            text-transform: uppercase;

            & .emphasis-title {
                position: relative;
                display: inline-block;
                color: rgb(253, 237, 31);
                font-style: italic;
                padding: 0 .25em;
                z-index: 1

            }

            & .emphasis-title::before {
                /* skewed background */
                content: "";
                position: absolute;
                inset: 0;
    
                background: var(--black);
                transform: skewX(-12deg);
    
                z-index: -1;
            }
        }

        & .text {
            font-size: var(--font-size-xl);
            line-height: var(--line-head-xl);
            color: var(--black-80);
        }
    }

    & .card-content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-8);
        
        width: 100%;

        & .controller {
            display: flex;
            flex-direction: column;
            align-items: start;
            justify-content: center;
            gap: var(--space-4);
            
            width: 70%;

            & .selection-card {
                display: flex;
                flex-direction: column;
                align-items: start;
                justify-content: center;
                gap: 0;
                
                background: var(--black-10);
                border-radius: var(--radius-lg);
                min-width: 100%;
                padding: var(--space-2);

                cursor: pointer;

                transition: 
                    transform .33s ease-in,
                    background .33s ease-in;

                & .header {
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: center;

                    & .title {
                        font-size: var(--font-size-xl);
                        line-height: var(--line-head-xl);
                        font-weight: var(--font-weight-semibold);
                        margin: 0;
                    }

                    & .pill {
                        background: var(--black-20);
                        padding: var(--space-2);
                        border-radius: var(--radius-circle);

                        transition: background .33s ease-in;

                        & .header-icon {
                            width: 15px;
                            height: 15px;
                            filter: 
                                brightness(15%)
                                invert(50%);

                            transition: filter .33s ease-in;
                        }
                    }

                }
                
                & .text-wrapper {
                    max-height: 0;
                    overflow: hidden;

                    width: 80%;

                    opacity: 0;

                    transition:
                        max-height .43s ease,
                        opacity .99s ease;

                    & .text {
                        margin: 0;
                        text-wrap: pretty;
                    }
                }

                &:hover {
                    background: rgb(253, 237, 31);

                    transition: background .33s ease-in;

                    & .header {
                        & .pill {
                            background: var(--black);

                            transition: background .33s ease-in;

                            & .header-icon {
                                filter: invert(1);

                                transition: 
                                    transform .33s ease-in,
                                    filter .33s ease-in;
                            }
                        }
                    }
                }

                &.active-selector {
                    background: rgb(253, 237, 31);
                    transform: scale(1.02);

                    transition: transform .33s ease-in;

                    & .header {
                        & .pill {
                            background: var(--black);

                            transition: background .33s ease-in;

                            & .header-icon {
                                filter: invert(1);
                                transform: rotate(-45deg);

                                transition: transform .33s ease-in;
                            }
                        }
                    }

                    & .text-wrapper {
                        max-height: 300px;
                        opacity: 1;

                        & .text {
                            margin-top: var(--space-2);
                        }
                    }
                }
            }
        }

        & .display {
            width: 25%; /* compliment the controller width */
            aspect-ratio: 1/1;

            display: flex;
            justify-content: center;
            align-items: center;

            position: relative;

            & .display-card {
                position: absolute;
                inset: 0;

                opacity: 0;
                pointer-events: none;
                transition: opacity .4s ease;

                & .display-content {
                    width: 100%;
                    height: 100%;
                    position: relative;
                    
                    & .cover-img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                        border-radius: var(--radius-lg);
                    }

                    & .additional-info {
                        position: absolute;
                        bottom: var(--space-2);
                        left: 50%;
                        transform: translateX(-50%);

                        display: flex;
                        justify-content: start;
                        align-items: center;
                        gap: var(--space-2);

                        background: var(--white-80);
                        width: 80%;
                        border-radius: var(--radius-lg);
                        padding: var(--space-1) var(--space-2);

                        & .pill {
                            background: rgb(253, 237, 31);
                            border-radius: var(--radius-circle);
                            padding: var(--space-1);

                            & .info-icon {
                                width: 20px;
                                height: 20px;
                            }
                        }

                        & .info-content {
                            display: flex;
                            flex-direction: column;
                            align-content: start;
                            justify-content: center;
                            gap: 2px;

                            & .chat-link {
                                cursor: pointer;
                                border: none;
                                background: none;
                                text-decoration: underline color(srgb 0.0666556 0.0666683 0.0667056 / 0.4);

                                &:hover {
                                    background: none;
                                    text-decoration-color: var(--black);
                                }
                            }

                            & .request-link {
                                color: var(--black);
                            }
                        }

                    }
                }

                &.active-display {
                    opacity: 1;
                    pointer-events: auto;
                }
            }
        }
    }
}