@import "../../bootstrap/variables";

.big-call-to-action-cards-2x-section {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--section-bg);
    padding: 80px 48px 48px;
    margin-left: -48px;
    margin-right: -48px;
    border-radius: 48px;

    &__cta-card {
        width: 100%;
        height: 360px;
        border: 2px solid transparent;
        transition: all 0.3s ease;

        &-confirmation {
            position: relative;
            top: -8px;
            z-index: 1;
            width: calc(100% - 32px);
            height: 96px;
            margin-right: 16px;
            margin-left: 16px;
            margin-bottom: -8px;
            border-radius: 0 0 24px 24px;

        }

        &:hover {
            border-color: var(--primary);
        }
    }

    @media (max-width: $screen-sm-max) {
        margin-left: 0;
        margin-right: 0;
        padding: 80px 24px 48px;
    }
}