.call-to-action {
    position: relative;
    display: block;
    padding: 15px;
    color: inherit;
    text-decoration: none;
    text-align: center;
    background: var(--bg-color, rgba(244, 138, 133, 0.90));

    .cta-inner {
        position: relative;
        z-index: 3;
        width: 100%;
        max-width: 50ch;
        padding: 22px 27px;
        margin: 0 auto;
    }

    .title {
        margin: 0;
        padding: 10px 0;
        font-family: var(--font-display);
        font-weight: var(--font-weight-bold);
        font-size: var(--text-3xl);
        line-height: var(--leading-none);
        letter-spacing: -0.05em;
        text-transform: uppercase;
        color: inherit;
        transition: color var(--transition-appendix);
    }

    .supertitle {
        display: block;
        margin-bottom: var(--space-1);
        font-family: var(--font-body);
        font-size: var(--text-sm);
        letter-spacing: 0.01em;
        text-transform: none;
    }

    .rectangles,
    .rectangle-1,
    .rectangle-2,
    .rectangle-3 {
        position: absolute;
    }
    
    .rectangles {
        inset: 0;
        z-index: -1;
        pointer-events: none;
        transition:
            scale var(--transition-appendix),
            opacity var(--transition-appendix);
    }

    .rectangle-1,
    .rectangle-2,
    .rectangle-3 {
        display: block;
        background: rgba(255, 255, 255, 0.5);
    }

    .rectangle-1 {
        inset: 0 22px 13px;
    }

    .rectangle-2 {
        inset: 13px 0 28px;
    }

    .rectangle-3 {
        inset: 26px 11px 0;
    }

    @media (hover: hover) {
        &:hover {
            color: inherit;

            .rectangles {
                scale: 1.18;
                opacity: 0.6;
            }
        }

    }

    @media (min-width: 64em) {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        padding: var(--space-10) var(--space-5);

        &::before {
            position: absolute;
            inset: auto 0 0;
            display: block;
            height: var(--space-5);
            content: '';
            background: var(--bg-color, rgba(244, 138, 133, 0.90));
            mix-blend-mode: multiply;
            opacity: 0.6;
            pointer-events: none;
        }

        .title {
            font-size: var(--text-2xl);
        }
    }

    @media (min-width: 90em) {
        padding: var(--space-10) var(--space-5) 52px;

        .cta-inner {
            padding: 46px var(--space-10);
        }

        .title {
            font-size: 2.375rem;
        }

        .supertitle {
            margin-bottom: 10px;
            font-size: var(--text-lg);
        }

        .rectangle-1 {
            inset: 0 29px var(--space-4);
        }

        .rectangle-2 {
            inset: 17px 0 35px;
        }

        .rectangle-3 {
            inset: 33px var(--space-3) 0;
        }
    }
}