@import '../../../../assets/scss/abstracts/variables';
@import '../../../../assets/scss/abstracts/mixins';

@property --color-rdg-main-promotions-promotion {syntax: "<color>";inherits: true;initial-value: #ffffff;}
@property --color-rdg-main-promotions-heading-shadow {syntax: "<color>";inherits: true;initial-value: #111111;}
@property --color-rdg-main-promotions-separator-line {syntax: "<color>";inherits: true;initial-value: #e69305;}
@property --color-rdg-main-promotions-separator-text {syntax: "<color>";inherits: true;initial-value: #e69305;}

.rdg-blocks .rdg-main-promotions {
    .preview-thumbs {
        background-image: url('../images/rdg-main-promotions-template-preview.jpg');
    }

    width: calc(var(--vw, 1vw) * 100);
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    max-width: 99.55vw;

    .container.content {
        width: 100%;
        display: flex;
        flex-direction: column;
        padding-left: 20px;
        padding-right: 20px;

        @include title;

        .body {
            display: flex;
            align-items: center;
            flex-direction: column;

            .promotions {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;
                gap: 2rem 1rem;

                @media (max-width: 1352px) {
                    & {
                        justify-content: space-evenly;
                    }
                }

                @media (max-width: 925px) {
                    & {
                        flex-direction: column;
                    }
                }

                .promotion {
                    width: 406px;
                    height: 186px;
                    display: flex;
                    flex-direction: column;
                    align-items:end;
                    color: var(--color-rdg-main-promotions-promotion);
                    background-size: cover;
                    background-repeat: no-repeat;

                    @media (max-width: $breakpoint-sm) {
                        & {
                            width: 100%;
                            border-radius: .5rem;
                        }
                    }

                    .body {
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        padding: 0 .5rem;

                        @media (max-width: $breakpoint-sm) {
                            & {
                                width: 100% !important;
                            }
                        }

                        .heading {
                            width: 100%;
                            padding-top: .5rem;
                            text-align: center;
                            text-shadow: 1px 3px 3px var(--color-rdg-main-promotions-heading-shadow);

                            .separator-group {
                                width: 100%;
                                display: flex;
                                justify-content: center;
                                align-items: center;

                                .separator-line {
                                    width: 18%;
                                    display: flex;
                                    background-color: var(color-rdg-main-promotions-separator-line);

                                    span {
                                        height: 2px;
                                        background-color: var(color-rdg-main-promotions-separator-line);
                                    }
                                }

                                .separator-text {
                                    width: 16%;

                                    span {
                                        border-radius: 50%;
                                        padding: .3rem;
                                        background-color: var(color-rdg-main-promotions-separator-text);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

.acf-block-preview {
    .rdg-main-promotions {
        width: 100% !important;
        left: 0;
        right: 0;
        margin-left: 0;
        margin-right: 0;
    }
}
