{% require_css %}
<style>
    {% scope_css %}
    {% if module.ad_opt.container_type == 'custom-container' %}
    .custom-container{
        max-width:px;
        margin:;
    }
    {% endif %}
    {% if module.ad_opt.text_align %}
    .baseModuleParent{
        text-align:
    }
    {% endif %}
    {% end_scope_css %}

    /* ===== Mirrored styling from original Three Column module ===== */

    .fourColumnBoxSection .card-inner { background: rgb(246, 246, 246); position: relative; height: 100%; box-sizing: border-box; }
    .fourColumnBoxSection .image { height: 221px; margin: 0px auto; position: relative; width: 221px; z-index: 6; }
    .fourColumnBoxSection .item, .fourColumnBoxSection .price { border-bottom: 1px solid rgb(29, 87, 123); }
    .fourColumnBoxSection .card { padding: 0 7px; box-sizing: border-box; }
    .fourColumnBoxSection .circle-box { position: relative; }
    .fourColumnBoxSection .circle-box::before { content: ""; top: 0px; left: 0px; width: 100%; height: 140px; background-color: rgb(29, 87, 123); position: absolute; z-index: 3; }
    .fourColumnBoxSection .bottom-content { background: rgb(246, 246, 246); z-index: 5; position: relative; margin-top: -50px; padding-top: 50px; }
    .fourColumnBoxSection .stripe-main { background-color: rgb(22, 49, 71); padding: 44px 30px; }
    .fourColumnBoxSection .left-inner { max-width: 610px; padding-left: 60px; }
    .fourColumnBoxSection .left-part { width: 59%; }
    .fourColumnBoxSection .right-part { width: 40%; }
    .fourColumnBoxSection .card.last-border-none ul .list-item:last-child { border-bottom: none; }
    .fourColumnBoxSection .card ul li { margin: 0px; }
    .fourColumnBoxSection ul { padding: 0px; margin: 0px; list-style: none; }
    .fourColumnBoxSection ul .list-item { border-bottom: 1px solid rgb(29, 87, 123); padding: 35px; text-align: center; margin: 0px; font-weight: 400; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; }
    .fourColumnBoxSection .bottom-content .list li strong { font-weight: 600; }
    .fourColumnBoxSection .top-card-content { background-color: rgba(188, 214, 47, 0.5); padding: 50px 30px; }
    .fourColumnBoxSection .list-main { margin: 0 !important; flex-wrap: wrap; justify-content: flex-start !important; column-gap: 0 !important; row-gap: 30px; width: 100% !important; }

    /* Two-button layout in stripe banner */
    .fourColumnBoxSection .right-part .buttons-wrap {
        display: flex !important;
        gap: 12px !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        white-space: nowrap !important;
    }

    /* Desktop: each card fills its full share of the container */
    @media (min-width: 1200px) {
        .fourColumnBoxSection.items-1 .card { width: 33.333% !important; flex: 0 0 33.333% !important; max-width: 33.333% !important; }
        .fourColumnBoxSection.items-2 .card { width: 50% !important; flex: 0 0 50% !important; max-width: 50% !important; }
        .fourColumnBoxSection.items-3 .card { width: 33.333% !important; flex: 0 0 33.333% !important; max-width: 33.333% !important; }
        .fourColumnBoxSection.items-4 .card { width: 25% !important; flex: 0 0 25% !important; max-width: 25% !important; }
        .fourColumnBoxSection.items-5 .card { width: 20% !important; flex: 0 0 20% !important; max-width: 20% !important; }
        .fourColumnBoxSection.items-6 .card { width: 16.6666% !important; flex: 0 0 16.6666% !important; max-width: 16.6666% !important; }
    }

    @media (max-width: 1199px) {
        .fourColumnBoxSection .card { width: 50% !important; flex: 0 0 50% !important; max-width: 50% !important; }
        .fourColumnBoxSection .section-gradient { display: none; }
        .fourColumnBoxSection .card:not(:first-child) .card-inner::before { display: none; }
        .fourColumnBoxSection .left-part { padding-left: 0px; width: 100%; }
        .fourColumnBoxSection .left-inner { padding-left: 0px; max-width: 100%; text-align: left; }
        .fourColumnBoxSection .right-part { width: 100%; margin-top: 20px; }
        .fourColumnBoxSection .stripe-main { padding: 30px 20px; }
        .fourColumnBoxSection .right-part .buttons-wrap { justify-content: flex-start !important; }
    }

    @media (max-width: 991px) {
        .fourColumnBoxSection ul .list-item { padding: 20px 10px; }
        .fourColumnBoxSection .image { width: 180px; height: 180px; }
    }

    @media (max-width: 767px) {
        .fourColumnBoxSection .card { width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; }
        .fourColumnBoxSection .item:last-child { border: none; }
        .fourColumnBoxSection .right-part .buttons-wrap { flex-wrap: wrap !important; }
    }
</style>
{% end_require_css %}