.cta-widget {
    --vlexblue: #003399;
	--fallyellow: #d7a059;
	--summergreen: #677a5a;
	--darkgreen: #21382d;
	--springblue: #e6ebf3;
	
    --darkblue: #00205f;
	--tan: #fcd192;
	--brown: #836130;
	--lightgray: #c7c9d4;
	--gray: #b4beb4;
	--darkgray: #555960;
    
    position: relative;
    margin: 2rem auto;
    text-align: center;
}

.cta-widget .content {
    background-color: white;
}

.cta-widget .content p {
    color: inherit;
}

.cta-widget .content .field-name {
    text-transform: uppercase;
    font-weight: bold;
}

.cta-widget .content .title {
    font-family: var(--font-denton);
    text-transform: unset
}

.cta-widget .content .field-group .field-control {
    border-radius: 0;
    height: 50px;
    margin: 0;
    flex: 1 0 auto;
}

.cta-widget.default-image .image {
    padding-right: 0;
}

.cta-widget.default-image .image img {
    max-width: 200px;
    margin: 0 auto;
    filter: drop-shadow( 1px 1px 4px rgba(0, 0, 0, .3));
}

@media (min-width: 768px) {
    .cta-widget {
        max-width: 80%;
        margin: 2rem auto;
    }
}

@media (max-width: 1023px) {
    .cta-widget {
        position: relative;
        display: flex;
        flex-direction: column;
    }
    
    .cta-widget .content {
        position: relative;
        padding: 2rem;
        padding-bottom: calc(2rem + 45px);
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
    }
    
    .cta-widget.default-image .content {
        top: -1rem;
    }
    
    .cta-widget.default-image .image {
        z-index: 1;
        width: 100%;
        text-align: center;
    }
    
    .cta-widget:not(.default-image) {
        display: grid;
        grid-template-rows: 1fr 3.5fr;
        grid-template-columns: 1fr;
    }
    
    .cta-widget:not(.default-image) .image {
        grid-row: 1 / span 2;
        grid-column: 1;
        aspect-ratio: auto;
    }
    
    .cta-widget:not(.default-image) .content {
        grid-row: 2;
        grid-column: 1;
    }
    
    /* PATTERNS */
    .cta-widget[class*="pattern-"]::after {
        height: 45px;
        background-size: 70px;
        content: "";
        display: block;
        width: 100%;
        position: absolute;
        bottom: 0;
    }
    
    .cta-widget.pattern-summerday::after {
        background-image: var(--pattern-summerday);
    }

    .cta-widget.pattern-summernight::after {
        background-image: var(--pattern-summernight);
    }
    
    .cta-widget.pattern-kentucky::after {
        background-image: var(--pattern-kentucky);
    }
    
    .cta-widget.pattern-twilight::after {
        background-image: var(--pattern-twilight);
    }
    
    .cta-widget.pattern-dandelion::after {
        background-image: var(--pattern-dandelion);
    }
}

@media (min-width: 1024px) {
    .cta-widget {
        display: grid;
        grid-template-columns: 1.75fr 1fr 9fr;
        grid-template-rows: 1rem 1fr 2rem;
        align-items: start;
        left: -3rem;
        gap: 24px;
    }
    
    .cta-widget .content {
        text-align: left;
    }
    
    .cta-widget .image {
        position: relative;
        display: flex;
        z-index: 10;
        grid-column: 1 / span 2;
        grid-row: 1 / 4;
        height: calc(100% - 4rem);
        justify-content: center;
        align-items: center;
        padding-right: 48px;
    }

    .cta-widget .image img {
        width: 100%;
        height: auto;
    }
    
    .cta-widget.default-image .image img {
        max-width: 250px;
    }
    
    .cta-widget:not(.default-image) .image,
    .cta-widget:not(.default-image) .image img {
        aspect-ratio: 25/59;
    }

    .cta-widget .content {
        flex-direction: row;
        grid-column: 2 / span 2;
        grid-row: 2 / span 1;
        justify-content: start;
        align-items: start;
        padding: 0;
    }

    .cta-widget .content .form {
        position: relative;
        padding: 4rem 4rem 4rem 6rem;
    }

    .cta-widget .content .form-group {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 4rem;
        align-items: start;
    }

    .cta-widget .content .field-group {
        display: flex;
        flex-flow: row nowrap;
        align-items: end;
    }

    .cta-widget .content .form-field {
        flex: 1 0 auto;
    }
    
    .cta-widget .cta-button {
        width: unset !important;
    }
    
    /* PATTERNS */
    .cta-widget[class*="pattern-"] {
        margin-bottom: 5rem;
        margin-top: 8rem;
    }

    .cta-widget[class*="pattern-"] .form::after {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 4rem;
        top: 4rem;
        z-index: -10;
        background-size: 7%;
    }

    .cta-widget.pattern-summerday .form::after {
        background-image: var(--pattern-summerday);
    }

    .cta-widget.pattern-summernight .form::after {
        background-image: var(--pattern-summernight);
    }
    
    .cta-widget.pattern-kentucky .form::after {
        background-image: var(--pattern-kentucky);
    }
    
    .cta-widget.pattern-twilight .form::after {
        background-image: var(--pattern-twilight);
    }
    
    .cta-widget.pattern-dandelion .form::after {
        background-image: var(--pattern-dandelion);
    }
    
    /* THEMES */
    .cta-widget.theme-springblue .form,
    .cta-widget.theme-springblue .form .field-control {
        background-color: var(--springblue);
    }
    
    .cta-widget .content.theme-vlexblue.theme-springblue {
        background-color: transparent;
    }
}

@media (min-width: 1280px) and (max-width: 1359px) {
    .cta-widget.default-image .image img {
        max-width: 250px;
    }
}

@media (min-width: 1360px) {
    .cta-widget.default-image .image img {
        max-width: 306px;
    }
}

@media (min-width: 1600px) {
    .cta-widget {
        grid-template-columns: 1.5fr 0.75fr 9fr;
    }
    .cta-widget .form .field-group .sv-button {
        padding: 16px 50px;
    }
}

/* THEMES */
.cta-widget .content.theme-vlexblue .title,
.cta-widget .content.theme-summergreen .title,
.cta-widget .content.theme-vlexblue .field-name,
.cta-widget .content.theme-darkgreen .field-name,
.cta-widget .content.theme-summergreen .field-name,
.cta-widget .content.theme-vlexblue label,
.cta-widget .content.theme-darkgreen label,
.cta-widget .content.theme-summergreen label,
.cta-widget .content.theme-vlexblue .text,
.cta-widget .content.theme-darkgreen .text,
.cta-widget .content.theme-summergreen .text {
    color: white !important;
}

.cta-widget .content.theme-default .title,
.cta-widget .content.theme-springblue .title {
    color: var(--vlexblue) !important;
}

.cta-widget .content.theme-vlexblue .title,
.cta-widget .content.theme-summergreen .title,
.cta-widget .content.theme-fallyellow .title {
    color: white !important;
}

.cta-widget .content.theme-darkgreen .title {
    color: var(--fallyellow) !important;
}

.cta-widget .content.theme-default .field-group .field-control,
.cta-widget .content.theme-springblue .field-group .field-control {
    border: 2px solid var(--vlexblue);
}

/* BUTTON */
.cta-widget .cta-button {
	border: 2px solid transparent;
    font-family: var(--font-graphik);
    font-weight: 600;
    text-transform: uppercase;
	font-size: 16px;
	line-height: 18px;
	letter-spacing: 0.08em;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    min-height: unset;
    border-radius: 0;
    height: 50px;
    padding: 16px;
    width: 100%;
}