.blogs-block {
    background-color: var(--white);
    padding: 8rem 0;
    background-image: url(../images/blog-bg.png);
    background-repeat: no-repeat;
    background-position: center 0;
    background-size: contain;
}

.blogs-block .intro {
    font-size: 2rem;
    line-height: 1.5;
    color: var(--black);
    font-weight: 400;
    text-align: center;
    max-width: 48rem;
    margin: 0 auto 3.75rem;
}

.blogs-block .card .top {
    margin-bottom: 1.5rem;
}


.blogs-block .card.blog .title {
    margin: .5rem 0;
}

.blogs-block .buttons {
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    margin-bottom: 3.75rem;
}

.blogs-block .items {
    display: flex;
    gap: 1.5rem;
    margin: 0 auto 3.75rem;
    max-width: 100rem;
    flex-wrap: wrap;
    justify-content: center;
}

.blogs-block .search {
    max-width: 31.25rem;
    margin: 0 auto 6.25rem;
}

.blogs-block .text .label {
    font-size: .875rem;
    text-transform: uppercase;
    font-weight: 400;
    font-family: 'JetBrains Mono', monospace;
    color: var(--purple-300);
    margin-bottom: .5rem;
}

.blogs-block .button {
    text-align: center;
}

.blogs-block .button .btn {
    font-weight: 500;
    color: var(--purple-400);
}

.blogs-block .button .btn .icon {
    vertical-align: middle;
    margin-right: .5rem;
}

.blogs-block .photo {
    max-height: 18.375rem;
    height: 18.375rem;
    overflow: hidden;
}
@media screen and (max-width: 1440px) {
    .blogs-block .container {
        max-width: 90rem;
    }
    .hero-button h2,
    .hero-button h1 {
        font-size: 4rem;
    }
}
@media screen and (max-width: 1024px) {
    .blogs-block .container {
        max-width: 60rem;
    }
    .blogs-block .photo {
        max-height: 15.375rem;
        height: 15.375rem;
    }
}

@media screen and (max-width: 768px) {
    .blogs-block {
        padding: 6rem 0;
    }
    .blogs-block .container {
        overflow-x: unset;
        max-width: 44rem;
    }
    .blogs-block .intro {
        font-size: 1.25rem;
        margin: 0 10rem 3.125rem;
    }
    .blogs-block .buttons {
        gap: .25rem;
    }
    .blogs-block .buttons .btn {
        padding: 1rem 1.25rem;
    }
    .blogs-block .items {
        gap: .75rem;
    }
    .blogs-block .items {
        max-width: 44rem;
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
    .blogs-block .photo {
        max-height: 12.75rem;
        height: 12.75rem;
    }
}

@media screen and (max-width: 550px) {
    .blogs-block {
        padding: 4rem 0;
        background-position: center 5rem;
        background-size: 200%;
    }
    .blogs-block .container {
        overflow-x: unset;
    }
    .blogs-block .buttons {
        display: block;
        margin: 0 2rem 2rem;
        gap: .5rem;
        text-align: center;
    }
    .blogs-block .buttons .btn {
        margin-bottom: .5rem;
    }
    .blogs-block .search {
        max-width: 20rem;
        margin-bottom: 2rem;
    }
    .blogs-block .intro {
        font-size: 1.25rem;
        margin: 0 2rem 2rem;
    }
    .blogs-block .items {
        margin: 0 2rem 3.75rem;
        grid-template-columns: 100%;
    }
    .blogs-block .card.blog .title {
        font-size: 1.25rem;
        line-height: 1.25;
    }
    .blogs-block .card.blog p
    {
        font-size: .875rem;
    }
}