:root {
    /**
   * typography
   */

    --ff-syne: 'Syne', sans-serif;

    --fs-1: 4.8rem;
    --fs-2: 4.5rem;
    --fs-3: 4rem;
    --fs-4: 2.4rem;
    --fs-5: 2rem;
    --fs-6: 1.8rem;
    --fs-7: 1.4rem;
    --fs-8: 1.2rem;

    --fw-800: 800;
    --fw-700: 700;

}

.section.blog {
    grid-template-columns: none;
}

.container__blog {
    padding-inline: 12px;
}

.btn__startup {
    padding-bottom: 5px;
    border-bottom: 2px solid black;
}

.btn__startup {
    padding-bottom: 5px;
    bottom: 20px;
    transition: all .5s ease;
    color: black;
    background-color: transparent;
    text-transform: capitalize;
    font-weight: 200;
  }
 .btn__startup:after {
    content: ' →';
  }  
  .btn__startup:hover{
    opacity: 0.7;
  }

  
  
 
  
  
  








.blog-list {
    display: grid;
    gap: 60px;
}

.blog-card {
    display: flex;
    flex-wrap: wrap;
    /* justify-content: center; */
    gap: 20px;
    align-items: center;
}


.blog-card .card-content {
    display: flex;
    flex-direction: row;
    gap: 16px;
    /* padding-inline: 16px; */
}

.blog-card .time {
    font-size: 13px;
}

.blog-card .time .span {
    color: var(--white);
    font-weight: var(--fw-700);
    line-height: 0.9;
}

.blog-card .card-text {
    max-width: 500px;
    margin-block: 20px;
}

.img-holder {
    /* aspect-ratio: var(--width) / var(--height); */
    background-color: var(--border-color);
    overflow: hidden;
}

.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/**
 * responsive for large than 575px screen
 */
@media (max-width: 575px) {

    .blog-card .card-content {
        display: block;
        gap: 32px;
    }
}

@media (min-width: 575px) {

    /**
     * REUSED STYLE
     */
    .container__blog {
        width: 100%;
        margin-inline: auto;
    }

    .slider {
        --slider-items: 2;
    }



    /**
     * BLOG
     */

    .blog-card .card-content {
        padding-inline: 32px;
        gap: 32px;
    }
}

@media (min-width: 900px) {

    /**
     * REUSED STYLE
     */
    .blog-card {
        flex-wrap: nowrap;
    }

    .blog-list > li:nth-child(even) .blog-card {
        flex-flow: row-reverse;
      }
      

    
}














/*   single project page styles*/
.img-single-project{
margin: auto;
    width: 80vw;
    height: 70%;
}