/* Adding variables */
@import url("../../css/variables.css");

.callout-button__main-container {
    width: var(--full);
    margin: 0 auto;
    padding: var(--padding);
}

.callout-button__main-container.dark {
    background: var(--blue-dark-gradient);
}

.callout-button__inner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--l-spacing);
    width: var(--width);
    padding: var(--l-spacing) 0;
    margin: 0 auto;
    border-top: solid 1px var(--neoblue);
}

.dark .callout-button__inner-container {
    border-top: none;
}

.callout-button__inner-container h3 {
    font-size: var(--h3);
    font-weight: var(--extralight);
    color: var(--neopaleblue);
}

.dark .callout-button__inner-container h3 {
    font-size: var(--h3);
    font-weight: var(--extralight);
    color: white;
}

.callout-button__inner-container h3 span {
    font-family: var(--work);
    font-size: var(--h3);
    font-weight: var(--regular);
    color: white;
    /* -webkit-text-stroke-width: var(--strokewidth);
    -webkit-text-stroke-color: white;
    -webkit-font-smoothing: subpixel-antialiased; */
}

/**********************************************/
/******************* Laptop *******************/
/**********************************************/
@media (max-width: 1366px) {

}

/**********************************************/
/******************* Tablet *******************/
/**********************************************/
@media (max-width: 1024px) {

}

/**********************************************/
/******************* Mobile *******************/
/**********************************************/
@media (max-width: 767px) {
    .callout-button__inner-container {
        flex-direction: column;
        gap: var(--m-spacing);
    }
}