.event-access {
    @extend %p-rel,
    %of-hidden;
    background-image: url(../images/event/bg.png);
    background-size: cover;
    background-attachment: fixed;

    &:after {
        @extend %p-abs,
        %w-100,
        %h-100;
        top: 0;
        left: 0;
        background-image: linear-gradient(135deg, $secondary-color 45%, $theme-color 93%);
        opacity: .9;
    }

    .mockup {
        @extend %p-abs;
        right: 0;
        text-align: right;
        bottom: 0;
        z-index: 1;

        .mok-img {
            max-width: 45%;

            @include breakpoint(sm) {
                max-width: 35%;
            }

            @include breakpoint(md) {
                max-width: 25%;
            }

            @include breakpoint(lg) {
                max-width: 50%;
            }

            @include breakpoint(xxl) {
                max-width: 65%;
            }
        }
    }


    .event-access-content {
        @extend %p-rel;
        z-index: 1;

        h2 {
            @extend %mb-20;
        }

        >p {
            @extend %mb-30;
            color: $title-color;
            line-height: 1.6;
            max-inline-size: 70ch;
        }


    }
}

//schedule section css
.schedule {
    @extend %of-hidden;

    &__item {
        @extend %p-20;
        background-color: $white-color;
        border-radius: .5rem;



        &-time {
            @include add-prefix(transform, translateY(-35px));
            background-color: $white-color;
            display: inline-grid;
            place-items: center;
            border-radius: .25rem;
            padding: .75rem 1.5rem;
            border: 2px solid rgba($theme-color, $alpha: .30);

            h6 {
                @extend %mb-0;
                color: $theme-color;
            }
        }

        &-content {
            margin-top: -10px;
        }


    }

    .col-lg-6 {
        &:not(:last-child) {
            @include breakpoint(lg) {
                .schedule__item {
                    &-inner {
                        position: relative;

                        &:after {
                            position: absolute;
                            content: "";
                            @include add-prefix(transform, rotate(-35deg));
                            height: 180px;
                            width: 8px;
                            background-color: rgba($white-color, $alpha: 1);
                            z-index: -1;
                            right: -40px;
                        }
                    }

                    &--right {
                        .schedule__item {
                            &-inner {

                                &:after {
                                    @include add-prefix(transform, rotate(35deg));
                                    left: -40px;
                                }
                            }
                        }
                    }
                }
            }

        }
    }
}