.wbk_add_to_calendar {
    margin-top: 24px;
    width: 100%;

    &__title {
        font-weight: 600 !important;
        font-size: 16px !important;
        line-height: 24px !important;
        letter-spacing: 0.5%!important;
        margin: 0 0 16px !important;
        color: #333;
        text-align: center;
        text-decoration: none!important;
    }

    &__grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        width: 100%;
    }

    &__link {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 21px 16px;
        gap: 8px;
        min-width: 125px;
        min-height: 84px;
        border-radius: 8px;
        border: 1.5px solid #edeff2;
        background-color: #fff;
        color: #668091;
        text-decoration: none !important;
        font-weight: 600;
        font-size: 14px;
        line-height: 22px;
        letter-spacing: 1%;
        text-align: center;
        transition: 0.2s all ease-in !important;

        &,
        * {
            transition: 0.2s all ease-in;
        }

        span {
            color: #668091;
        }

        &:hover {
            border-color: colors.$wbk-color-border-selected;
            background-color: colors.$wbk-primary-50;

            span {
                color: #22292f;
            }
        }

        &:focus {
            outline: 2px solid colors.$wbk-primary-400;
            outline-offset: 2px;
        }
    }

    &__icon {
        width: 24px;
        height: 24px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;

        img,
        svg {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: block;
        }
    }
}