.cta {
    position: relative;
}

.cta--split {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cta-col {
    position: relative;
    z-index: 1;
}

.cta__bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.cta__overlay {
    position: relative;
    z-index: 1;
}

.cta--split .cta__overlay {
    padding: 36px 22px;
    background: rgba(0, 0, 0, 0.68);
}

.cta-col__content {
    color: var(--light);
    text-align: center;

    ul, ol {
        text-align: left;
    }
}

.cta--split .cta-col__content p {
    color: var(--body-with-dark-background);
}

.cta-col__image {
    max-width: 205px;
    margin: 0 auto 20px;
}

.hyster-logo {
    max-width: 100px;
}


.cta--split .btn-group {
    margin-top: 19px;
    justify-content: center;
}

.cta--mini .btn-group {
    margin-top: 30px;
}

.cta--mini .cta-col__content {
    max-width: unset;
    text-align: left;
}

.cta--mini .cta__overlay {
    padding: 36px 22px;
}

.cta--bg-yellow {
    background: var(--primary-color);

    & .btn-tertiary {
        background: var(--white);
        color: var(--secondary-color);
        
        &:hover {
            background: var(--secondary-color);
            color: var(--white);
        }
    }
}

.cta--bg-yellow .cta__bg {
    z-index: inherit;
    mix-blend-mode: multiply;
}

.bg-darkest .cta__bg {
    z-index: inherit;
    opacity: 0.11;
}

.cta--large .cta__overlay {
    padding: 100px 22px;
}

.cta--large .btn-group {
    justify-content: center;
}

.cta--bg-yellow .cta-col__content {
    color: var(--white);
}

.cta--bg-yellow .cta-col__content :where(p, h2, h3, h4, h5, h6, ul, ol, a:not(.btn)) {
    color: var(--white);
}

.cta-col__content h2+h4 {
    margin-top: 28px;
}

.cta--split--inner .cta-col__image {
    max-width: unset;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta--split .btn {
  font-size: 18px;
  padding: 14px 53px 14px 33px;
}

.cta--split .cta-col:only-child {
    width: 100%;
    display: block;
}

.cta--split .cta-col:only-child .cta-col__content {
    margin: 0 auto;
}

.cta--bg-yellow .btn-primary {
    background: var(--darkest);
    color: var(--white);
    border-color: var(--white);
}

@media(min-width: 768px) {
    .cta--split .cta__overlay {
        padding: 50px 52px;
    }

    .cta--split .btn-group {
        margin-top: 35px;
    }

    .cta-col__image {
        max-width: unset;
        margin: 0 auto 28px;
    }

    .hyster-logo {
        max-width: unset;
    }

    .cta-col__content h2+h4 {
        margin-top: 25px;
    }

    .cta--mini .cta__overlay {
        padding: 50px 52px;
    }

    .cta--large .cta__overlay {
        padding: 150px 53px;
    }

    .cta--split--inner {
        gap: 0;
    }

    .cta .btn-group {
        gap: 20px 32px;
    }
}


@media(min-width: 1200px) {
    .cta--split {
        flex-direction: row;
        gap: 8px;
        justify-content: space-between;
    }

    .cta-col {
        width: calc(50% - 4px);
        display: inline-grid;
    }

    .cta--split .cta-col__image {
        min-height: 125px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .cta--split .cta-col {
        display: flex;
        flex-direction: column;
    }

    .cta--split .cta-col .cta__overlay {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .cta--split .cta-col .cta-col__content {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .cta--split .cta-col .cta-col__image-description {
        flex: 1 1 auto;
        min-height: 0;
    }

    .cta--split .cta-col .btn-group {
        margin-top: auto;
    }

    .cta--split .cta__overlay {
        padding: 140px 92px;
    }

    .cta-col__content {
        max-width: 460px;
    }

    .cta-col .cta-col__content {
        margin-left: auto;
        margin-right: auto;
    }

    .cta-col__image {
        margin: 0 auto 35px;
    }

    .cta--mini .cta-col__content {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: center;
      
    }
    .cta--mini .cta-col__content-inner {
        flex: 1.5;
        padding-right: 15px;
    }

    .cta--mini .cta-col__content .section__link {
        flex: 0.5;
        text-align: right;
    }

    .cta--mini .cta__overlay {
        padding: 100px 52px;
    }

    .cta--mini .cta-col__content h4 {
        margin: 0;
    }

    .cta--large .cta-col__content {
        max-width: 1048px;
        margin: 0 auto;
    }

    .cta--large .cta__overlay {
        padding: 150px 52px;
    }

    .cta--large .btn-group {
        gap: 32px;
    }

    .cta--split .btn {
        font-size: 19px;
        padding: 18px 55px 18px 33px;
    }
	.cta--bg-yellow .btn-primary:hover{
		color: var(--primary-color);
	}
}