/* Program. */

.program {
    position: relative;
    padding-bottom: var(--section-gap);
    margin-top: max(var(--section-gap), 100px) !important;
}

.program .container {
    position: relative;

    z-index: 1;
}

.program-dec {
    position: absolute;
    top: 0;
    left: 0;

    max-width: 948px;
    background-color: var(--color-background);
    z-index: -1;
}

.program-dec img {
    mix-blend-mode: difference;
}

.program-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    grid-gap: var(--i4);

    width: 100%;
    max-width: 592px;
    margin: 0 auto;
    text-align: center;
}

.program-list {
    display: flex;
    flex-direction: column;
    grid-gap: var(--i2);
}

.program-list:not(:first-child) {
    margin-top: calc(var(--i2) - var(--i4));
}

.program-list:not(:last-child) {
    margin-bottom: calc(var(--section-gap) - var(--i4));
}

.program-list a {
    display: inline-block;
    position: relative;
}

@media (hover: hover) {
    .program-list a:before {
        content: '';
        position: absolute;
        inset: 0;

        background-color: #FF112B;
        opacity: .15;
        z-index: -1;
        filter: blur(24px);

        -webkit-transition: opacity var(--transition-duration);
        -moz-transition: opacity var(--transition-duration);
        -ms-transition: opacity var(--transition-duration);
        -o-transition: opacity var(--transition-duration);
        transition: opacity var(--transition-duration);
    }

    .program-list a:not(:hover):before {
        opacity: 0;
    }

}

/* Program. */

@media only screen and (min-width: 1200px) {
    .program-image {
        position: absolute;
    }

    .program-image img {
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }

    .program-image img:not(:first-child) {
        display: none;
    }

    .program-image-1 {
        top: 200px;
        left: calc(50% - 532px);

        width: 132px;
    }

    .program-image-2 {
        left: var(--container-padding);
        bottom: 0;

        width: 228px;
    }

    .program-image-2 img {
        -webkit-border-radius: 200px 200px 4px 4px;
        -moz-border-radius: 200px 200px 4px 4px;
        border-radius: 200px 200px 4px 4px;
    }

    .program-image-3 {
        top: 50%;
        right: var(--container-padding);

        width: 260px;

        -webkit-transform: translate3d(0, -50%, 0);
        -moz-transform: translate3d(0, -50%, 0);
        -ms-transform: translate3d(0, -50%, 0);
        -o-transform: translate3d(0, -50%, 0);
        transform: translate3d(0, -50%, 0);
    }
}

@media only screen and (max-width: 1199px) {
    .program-image {
        display: none;
    }
}