.container-calltoaction {
    --link-font-size: 0.8vw;
    --link-font-size-offset: 0.1vw;
    --link-letter-spacing: 6px;
    --link-letter-spacing-offset: 0.7px;
    height: auto;
}

    .container-calltoaction .container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        column-gap: 2vw;
    }

        .container-calltoaction .container .action {
            text-align: center;
            vertical-align: middle;
            padding: 2vw 0 2vw 0;
            border: 1px solid var(--border-color);
            border-collapse: collapse;
            width: 23vw;
            cursor: pointer;
        }

            .container-calltoaction .container .action span {
                font-family: var(--secondary-font-family);
                font-size: var(--link-font-size);
                font-weight: 600;
                letter-spacing: var(--link-letter-spacing);
                color: var(--link-font-color);
                text-transform: uppercase;
                text-decoration: none;
            }

            .container-calltoaction .container .action:hover {
                background-color: var(--link-font-color);
            }

                .container-calltoaction .container .action:hover span {
                    color: var(--bg-color);
                }

            .container-calltoaction .container .action.light-color {
                border: 1px solid var(--bg-color);
            }

                .container-calltoaction .container .action.light-color span {
                    color: var(--bg-color) !important;
                }

                .container-calltoaction .container .action.light-color:hover {
                    color: var(--link-font-color);
                    background-color: var(--bg-color);
                }

                    .container-calltoaction .container .action.light-color:hover span {
                        color: var(--link-font-color) !important;
                    }

@media (min-width: 992px) and (max-width: 1199px) {
    .container-calltoaction .container .action span {
        font-size: calc(var(--link-font-size) + 0 * var(--link-font-size-offset));
        letter-spacing: calc(var(--link-letter-spacing) - 1 * var(--link-letter-spacing-offset));
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .container-calltoaction .container .action span {
        font-size: calc(var(--link-font-size) - 0 * var(--link-font-size-offset));
        letter-spacing: calc(var(--link-letter-spacing) - 2 * var(--link-letter-spacing-offset));
    }
}

@media (max-width: 767px) {
    .container-calltoaction .container .action span {
        font-size: calc(var(--link-font-size) - 0 * var(--link-font-size-offset));
        letter-spacing: calc(var(--link-letter-spacing) - 2 * var(--link-letter-spacing-offset));
    }

    .container-calltoaction .container .action span {
        font-size: 1.3vw;
    }
}

/*@media (min-width: 576px) and (max-width: 767px) {
    .container-calltoaction .container {
        flex-direction: column;
    }

        .container-calltoaction .container .action {
            text-align: center;
            vertical-align: middle;
            cursor: pointer;
            width: 100%;
            margin: 10px 0 10px 0;
        }

            .container-calltoaction .container .action span {
                font-size: 12px;
                font-weight: 600;
                letter-spacing: 5px;
                color: var(--link-font-color);
                text-transform: uppercase;
                text-decoration: none;
            }
}

@media (max-width: 575px) {
    .container-calltoaction .container {
        flex-direction: column;
    }

        .container-calltoaction .container .action {
            text-align: center;
            vertical-align: middle;
            cursor: pointer;
            width: 100%;
            margin: 10px 0 10px 0;
            padding: 20px 0 20px 0;
        }

            .container-calltoaction .container .action span {
                font-size: 12px;
                font-weight: 600;
                letter-spacing: 5px;
                color: var(--link-font-color);
                text-transform: uppercase;
                text-decoration: none;
            }
}
*/