@layer components {
    .save-portfolio-banner {
            background: #1e293b;
            color: #ffffff;
            width: 100%;
        }

    .save-portfolio-banner__inner {
            align-items: center;
            display: grid;
            gap: 1.5rem;
            margin: 0 auto;
            max-width: var(--dashboard-shell-max-width);
            padding: 3rem var(--dashboard-section-padding-x);
        }

    .save-portfolio-banner__copy,
        .save-portfolio-banner__actions {
            min-width: 0;
        }

    .save-portfolio-banner__title {
            color: #ffffff;
            font-size: clamp(1.75rem, 4vw, 2.25rem);
            font-weight: 800;
            letter-spacing: 0;
            line-height: 1.15;
        }

    .save-portfolio-banner__text {
            color: #cbd5e1;
            font-size: 1.125rem;
            line-height: 1.5;
            margin-top: 0.75rem;
            max-width: 48rem;
        }

    .save-portfolio-banner__form {
            display: grid;
            gap: 0.75rem;
        }

    .save-portfolio-banner__input {
            border-color: transparent;
            min-width: 0;
        }

    .save-portfolio-banner__submit {
            min-width: 0;
        }

    .save-portfolio-banner__note {
            color: #cbd5e1;
            font-size: 0.875rem;
            line-height: 1.5;
            margin-top: 0.75rem;
        }

    .save-portfolio-banner__link {
            color: #ffffff;
            font-weight: 650;
            text-decoration: underline;
        }

    .save-portfolio-banner__link:hover {
            color: #dbeafe;
        }

    @media (min-width: 48rem) {
        .save-portfolio-banner__inner {
                    grid-template-columns: minmax(0, 1fr) auto;
                    padding-left: var(--dashboard-section-padding-x-lg);
                    padding-right: var(--dashboard-section-padding-x-lg);
                }
    }

    @media (min-width: 48rem) {
        .save-portfolio-banner__form {
                    align-items: center;
                    display: flex;
                }
    }

    @media (min-width: 48rem) {
        .save-portfolio-banner__input {
                    max-width: 20rem;
                }
    }
}