@import "../../bootstrap/variables";

@keyframes information-card-full-width-overlay-image-animation {
    0%, 100% {
        transform: translateY(8px);
    }
    50% {
        transform: translateY(-24px);
    }
}



.information-card-full-width-section {

    &__badge-divider {
        width: 16px;
        height: 3px;
        background-color: var(--gray-200);
    }

    &__images-box {
        padding: 48px;

        &,& img, & > div {
            border-radius: 16px;
        }

        &.top_margin {
            padding: 48px 0 0;

            &,& img, & > div {
                border-radius: 24px 0 24px 0;
            }
        }

        &.top_and_bottom_margin {
            padding: 48px 0;

            &,& img, & > div {
                border-radius: 24px 0 0 24px;
            }
        }

        .flex-row-reverse &.top_margin {
            &,& img, & > div {
                border-radius: 0 24px 0 24px;
            }
        }

        .flex-row-reverse &.top_and_bottom_margin {
            &,& img, & > div {
                border-radius: 0 24px 24px 0;
            }
        }

        @media (max-width: $screen-sm-max) {
            margin: 0 !important;
            padding: 0 0 24px 0 !important;

            &,& img, & > div {
                border-radius: 24px !important;
            }
        }
    }

    &__main-img {
        width: 100%;
        height: 510px;
        overflow: hidden;

        img {
            transition: all 0.45s ease;
        }

        &:hover img {
            transform: scale(1.1);
        }

        @media (max-width: $screen-sm-max) {
            height: 420px;
        }
    }

    &__overlay-img {
        position: absolute;
        bottom: 48px;
        left: -116px;
        width: 208px;
        height: 208px;
        animation: information-card-full-width-overlay-image-animation 4s ease-in-out infinite;

        img {
            max-width: 100%;
            max-height: 100%;
        }

        .rtl & {
            left: auto;
            right: -116px;
        }

        @media (max-width: $screen-sm-max) {
            bottom: 20px;
            left: -24px;
            width: 104px;
            height: 104px;

            .rtl & {
                left: auto;
                right: -24px;
            }
        }
    }
}