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

.blog-section {
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding: 80px 0;

    @media (max-width: $screen-sm-max) {
        height: auto;
        padding: 20px 0;
    }


    &__post-card {
        overflow: hidden;

        &-img {
            transition: all 0.4s ease-in-out;
        }

        &:hover &-img {
            transform: scale(1.08);
        }

        &-footer {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            border-radius: 0 0 24px 24px;
            background: linear-gradient(0deg, #000 0.34%, rgba(0, 0, 0, 0.00) 99.89%);

            .dark-mode & {
                background: linear-gradient(0deg, #E1EAF6 0.34%, rgba(225, 234, 246, 0.00) 99.89%);
            }

            &-divider {
                width: 1px;
                height: 16px;
                margin: 0 12px;
                background-color: var(--gray-400);
            }
        }

        &.one-large-col {
            height: 480px;

            .blog-section__post-card-footer {
                height: 200px;
            }

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

                .blog-section__post-card-footer {
                    height: 170px;
                }
            }
        }

        &.four-small-col {
            height: 228px;

            .blog-section__post-card-footer {
                height: 148px;
            }

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

    }
}