@import url(style.css);

*{
    --bgcolor: #ffff;
    --offbg:#dfdcdc;
    --primary: #000000;
    --bgprimary:#2c2c2c;
    --peach:#eb9f7d;
  }


body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
*{
    --bg-black:#050505;
    --h1: 'Overpass', sans-serif;
 }.cover{
    height: 70px;
    width: 100%;
    background: transparent;
}.main-head{
    z-index: 999;
}.blog-cover{
    max-width:60%;
    height: 215px;
    background: var(--offbg);
    margin: auto;
    border-radius: 18px;
    display: flex;
    margin-bottom: 50px;
    margin-top: 30px;
}.blog-cover .img-cover-main-blog{
    height: auto;
    width: 180px;
    background: gray;
    border-radius: 18px;
    margin: 6px;
}.blog-cover .content{
    margin: 15px;
    max-height: 1000px;    
}
.content h2{
    color: var(--bg-black);
}.content p{
    text-align: left;
    max-height: 98px;
    overflow: hidden;
    color: var(--bg-black);
    
}.content-2  {
    text-align: right;
    color: var(--bg-black);
    margin: 15px;
}.content-2 > p{
    text-align: right;
    max-height: 98px;
    overflow: hidden;
    color: var(--bg-black);
}
.blog-cover .img-cover-main-blog img{
    width: 180px;
    height: 100%;
    border-radius: 18px;
}
.blog-items-cover{
    width: 100%;
    height: 100%;
}
.blog-items{
    width: 60%;
    height: auto;
    margin: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;    
}.items{
    width: 190px;
    height: 260px;
    background: var(--offbg);
    border-radius: 18px;
    
}.items img{
    width: 180px;
    height: 200px;
    border-radius: 18px;
    margin: 5px;
}.items-contunt P{
    font-size: 11px;
    letter-spacing: 10px;
    text-align: center;
    color: var(--primary);
}.items-contunt span{
    font-size: 18px;
    letter-spacing: 5px;
    font-weight: 700;
    text-align: center;
}.blog-cover .content-2-copy{
    display: none;
}.blog-items{
    gap: 30px;
}
@media (max-width:767px){
    .blog-cover{
        flex-direction: column;
        max-width:40%;
        height: 50%;
    }.blog-cover .img-cover-main-blog{
        height: auto;
        width: 100%;
        background: gray;
        border-radius: 18px;
    }.blog-cover .img-cover-main-blog img{
        width: 100%;
        height: 100%;
        border-radius: 18px;
    }.blog-cover .content {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }.blog-cover p{
        text-align: center;
        max-height: 98px;
        overflow: hidden;
    }.blog-items{
        gap: 30px;
        align-items: center;
        justify-content: center;
    }
    .blog-cover .content-2{
        display: none;
    }.blog-cover .content-2-copy{
        display: block;
    }.content-2-copy   {
        text-align: center;
        color: black;
        margin: 15px;
    }.blog-cover .content-2-copy{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        max-height: 1000px;
    }.blog-cover .content-2-copy > p{
        overflow: hidden;
    }
}
@media(max-width:576px){
    .blog-cover {
        flex-direction: column;
        max-width: 90%;
        height: 50%
    }.blog-cover .img-cover-main-blog{
        height: auto;
        width: 90%;
        background: gray;
        border-radius: 18px;
        margin: auto;
    }.blog-cover{
        padding-top: 10px;   
    }

    .blog-items{
    width: 100%;
    height: auto;
    margin: auto;
    display: grid;
    /* align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;     */
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.items img {
    width: 93%;
    height: 166px;
    border-radius: 18px;
    margin: 5px;
}
.items {
    width: 100%;
}
}