*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: "Work Sans", serif;
    
}


body {
    background: white;
    display: flex;
        align-items: center;
        justify-content: center;
        margin: 0;
        min-height: 100vh;
}

a{
    color:#000;
    text-decoration: none;
}

#card-container{
    display: flex;
        width: 384px;
        padding: var(--spacing-200, 24px);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-200, 24px);
        flex-shrink: 0;
        background-color: white;
        border-radius: 20px;
            background: var(--color-white, #FFF);
        box-shadow: 0px 38.26px 38.26px 0px rgba(177, 187, 211, 0.34);
}

.card-img img {
    border-radius: 10px;
    height:400
}

.card-text {
    display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-150, 12px);
        align-self: stretch;
}

.tag-bg {
    background-color: #3F58FF;
   padding: var(--spacing-50, 4px) var(--spacing-150, 12px);;
    border-radius: 30px;

        /* 21px */
}

.tag-bg h4 {
    border-radius: 30px;
    color: white;

    font-family: "Work Sans";
    font-size: var(--font-size-text-preset-3, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    line-height: 150%;
    /* 21px */
}

.published-date{
color: #192442;

    font-family: "Work Sans";
    font-size: var(--font-size-text-preset-3, 14px);
    font-style: normal;
    font-weight: 00;
    line-height: 150%;/
        /* 21px */
}

.preview-text{
    color: var(--color-gray-500, #7C87A2);
        font-family: "Work Sans";
        font-size: var(--font-size-text-preset-2, 16px);
        font-style: normal;
        font-weight: 400;
        line-height: 150%;
        /* 24px */
}

.blog-title {
    color: var(--color-gray-950, #192442);
        font-family: "Work Sans";
        font-size: var(--spacing-200, 24px);
        font-style: normal;
        font-weight: 600;
        line-height: 150%;
      
  
}
.blog-title:hover {
    color: #3F58FF;
    /* Change text color */
}


.avatar-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-150, 12px);
}


.avatar-container h4 {
    color: #222B43;
    
        font-family: "Work Sans";
        font-size: var(--font-size-text-preset-3, 14px);
        font-style: normal;
        font-weight: 600;
        line-height: 150%;
        /* 21px */
        /* 21px */
}

.avatar-container img {
    width: 40px;
    /* Adjust the width */
    height: 40px;
    /* Adjust the height */
    border-radius: 50%;
    /* Keeps it circular */
    object-fit: cover;
    /* Ensures the image fills the area */
}