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

@property --color-rdg-simple-post-list-column-bg {syntax: "<color>"; inherits: true; initial-value: #ffffff;}
@property --color-rdg-simple-post-list-title {syntax: "<color>"; inherits: true; initial-value: #0160ac;}
@property --color-rdg-simple-post-list-button {syntax: "<color>"; inherits: true; initial-value: #0160ac;}
@property --color-rdg-simple-post-list-button-border {syntax: "<color>"; inherits: true; initial-value: #0160ac;}

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

    .container.content {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .column {
            padding: 15px;
            border-radius: 0.8rem;
            background-color: var(--color-rdg-simple-post-list-column-bg);
            width: 25rem;
            height: 535.38px;

            @media (max-width: 450px) {
                width: 18.75rem;
                min-width: initial;
                height: auto;
            }

            @media (max-width: 860px) {
                height: auto;
            }

            .post-img {
                max-width: 380px;

                img {
                    border-radius: 0.8rem;
                }
            }

            .title {
                text-align: justify;
                color: var(--color-rdg-simple-post-list-title);
                padding-top: 20px;
            }

            .description {
                padding: 24px 0;
                text-align: justify;

                @media (max-width: 860px) {
                    padding: 20px 0;
                }
            }

            .read-more {
                @media (max-width: 860px) {
                    padding-bottom: 10px;
                }

                a {
                    color: var(--color-rdg-simple-post-list-button);
                    border-bottom: 1px solid var(--color-rdg-simple-post-list-button-border);
                }
            }
        }
    }
}
