#programsContainer-TM-v3 {
    position: relative;
    margin: 0 auto;
    padding: 60px 20px;
    background-color: var(--programs-TM-v3-bg-color, #ffffff);
    --header-accent-color: var(--secondary-color);

    @media (width >=600px) {
        padding: 60px 32px;
    }

    &.style-bold .header-slot-container {
        border-color: var(--header-accent-color);
    }

    .header-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 32px;

        @media (width <=599px) {
            flex-direction: column;
            gap: 16px;
        }
    }

    h2 {
        font-size: 32px;
        color: var(--programs-TM-v3-heading-color, #000000);
        margin: 0;
        text-transform: uppercase;
    }

    .header-description {
        color: var(--programs-TM-v3-header-desc-color, #000000);
        font-size: 20px;
        font-weight: 300;
        line-height: 28px;
        max-width: 480px;
        word-break: break-word;
        text-transform: none;
    }

    .programs-slider-container {
        overflow: hidden;
        position: relative;
        padding-bottom: 20px;

        &:has(.slider-controls-container .swiper-button-lock) .swiper-wrapper {
            justify-content: center;
        }
    }

    .program-card {
        display: flex;
        flex-direction: column;
        height: auto;
        width: 324px !important;
        max-width: 100%;

        @media only screen and (max-width: 459px) {
            width: 310px !important;
        }
    }

    .program-image-container {
        aspect-ratio: 1 / 1;
        width: 100%;
        flex-shrink: 0;

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }

    .program-card-wrapper {
        background-color: var(--programs-TM-v3-box-bg-color, var(--primary-color));
        color: var(--programs-TM-v3-text-color, var(--primary-color-contrast));
        padding: 18px 30px;
        position: relative;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }

    .program-bottom-card {
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex-grow: 1;
        word-break: break-word;

        &::after {
            content: "";
            position: absolute;
            top: -10px;
            bottom: 15px;
            left: 10px;
            right: 10px;
            border: 2px solid var(--programs-TM-v3-image-border-color, var(--primary-color-contrast));
            pointer-events: none;
            z-index: 2;
        }

        .program-title-wrapper {
            margin: 0;

            a {
                font-size: 24px;
                font-weight: 900;
                line-height: 32px;
                text-decoration: none;
                color: inherit;

                &::after {
                    content: '';
                    position: absolute;
                    inset: 0;
                    z-index: 10;
                }
            }
        }

        .program-description {
            font-size: 16px;
            font-weight: 300;
            line-height: 24px;

            p {
                margin-bottom: 12px;

                &:last-child {
                    margin-bottom: 0;
                }
            }

            a {
                color: var(--programs-TM-v3-link-color, var(--primary-color-contrast));
                font-weight: 500;
                text-decoration: underline;
                position: relative;
                z-index: 11;
            }
        }
    }

    .slider-controls-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 32px;
        width: 100%;

        &:has(.swiper-button-lock) {
            display: none;
        }

        @media only screen and (max-width: 599px) {
            flex-direction: column-reverse;
            gap: 24px;
        }
    }

    .slider-arrows {
        display: flex;
        gap: 8px;

        @media (width >=600px) {
            margin-left: 5px;
        }

        .custom-arrow {
            position: relative;
            inset: auto;
            margin: 0;
            width: 48px;
            height: 48px;
            background-color: var(--programs-TM-v3-arrow-bg-color, var(--primary-color));
            color: var(--programs-TM-v3-arrow-icon-color, var(--primary-color-contrast));
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: opacity 0.2s;

            &:focus-visible {
                outline: 2px solid var(--focus-visible-outline, #0000ff) !important;
                outline-offset: 2px !important;
                box-shadow: 0 0 0 2px var(--focus-visible-box-shadow, #ffffff) !important;
            }

            &.swiper-button-prev::after {
                content: '';
                display: block;
                width: 15px;
                height: 12px;
                background-color: var(--programs-TM-v3-arrow-icon-color, var(--primary-color-contrast));
                -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='15' height='12' viewBox='0 0 15 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 6L14 6M1 6L5.78947 11M1 6L5.78947 0.999999' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
                mask-image: url("data:image/svg+xml,%3Csvg width='15' height='12' viewBox='0 0 15 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 6L14 6M1 6L5.78947 11M1 6L5.78947 0.999999' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
                -webkit-mask-size: contain;
                mask-size: contain;
                -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
            }

            &.swiper-button-next::after {
                content: '';
                display: block;
                width: 15px;
                height: 12px;
                background-color: var(--programs-TM-v3-arrow-icon-color, var(--primary-color-contrast));
                -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='15' height='12' viewBox='0 0 15 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 6H1M14 6L9.21053 1M14 6L9.21053 11' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
                mask-image: url("data:image/svg+xml,%3Csvg width='15' height='12' viewBox='0 0 15 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 6H1M14 6L9.21053 1M14 6L9.21053 11' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
                -webkit-mask-size: contain;
                mask-size: contain;
                -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
            }
        }
    }

    .custom-pagination {
        position: static;
        width: auto;
        display: flex;
        gap: 8px;
        margin: 0;

        .swiper-pagination-bullet {
            width: 40px;
            height: 12px;
            border-radius: 0;
            background-color: var(--programs-TM-v3-box-bg-color, var(--primary-color));
            opacity: 0.2;
            margin: 0;

            &.swiper-pagination-bullet-active {
                opacity: 1;
            }
        }
    }
}