import { styled } from "styled-components";
import { device } from "../../common/Devices";
import { Colors } from "../../common/variable";

export const BlogListSection = styled.section`
    margin-bottom: -60px;
    .blog-col{
        margin-bottom: 60px;
    }
    .blog-card{
        width: 100%;
        height: 100%;
        border-radius: 24px;
        border: 1px solid #DCDCDC;
        background: ${Colors.white};
        backdrop-filter: blur(6.5px);
        padding: 15px;
        .blog-image{
            border: 1px solid ${Colors.white};
            background: linear-gradient(180deg, #F4F4F4 0%,  ${Colors.white} 100%);
            width: 100%;
            height: 334px;
            overflow: hidden;
            border-radius: 15px;
            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: all 0.8s;
                filter: grayscale(1);
            }
            
        }
        .blog-content{
            padding-top: 15px;
            h5{
                margin-bottom: 20px;
                color: ${Colors.body};
                font-weight: 600;
                transition: all 0.4s;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;  
                overflow: hidden;
            }
            p{
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;  
                overflow: hidden;
                color: ${Colors.gray_33};
                letter-spacing: 0.2px;
                margin-bottom: 20px;
            }
            .date{
                margin-bottom:15px;
            }
            .link{
                font-size: 20px;
                line-height: 1.5;
                font-weight: 500;
                letter-spacing: 0.2px;
                color: ${Colors.primary};
                svg{
                    transition: all 0.8s;
                }
                &:hover{
                    svg{
                        transform: translateX(10px);
                        transition: all 0.8s;
                    }
                }
            }
        }
        &:hover{
            .blog-image{
                img{
                    transform: scale(1.1);
                    transition: all 0.8s;
                    filter: grayscale(0);
                }
            }
        }
    }
    @media ${device.laptop}{
        .blog-card {
            .blog-image{
                height: 250px;
            }
        }
    }
    @media ${device.laptopS}{
        margin-bottom: -40px;
        .blog-col{
            margin-bottom: 40px;
        }
        .blog-card {
            .blog-image{

            }
        }
    }

    @media ${device.tablet}{
        margin-bottom: -24px;
        .blog-col{
            margin-bottom: 24px;
        }
        .blog-card {
            .blog-content {
                .link{
                    font-size: 16px;
                    svg{
                        width: 22px;
                    }
                }
            }
        }
    }

    @media ${device.mobile}{
        .blog-card {
            padding: 6px;
            .blog-image{
                height: auto;
            }
            .blog-content {
                padding: 15px 6px 6px;
                h5{
                    margin-bottom: 16px;
                }
            }
        }
    }
`;