.container-blog-home {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.container-blog-home .left-box {
    width: calc(70% - 20px);
}

.container-blog-home .left-box .top-box {
    width: 100%;
}

.container-blog-home .left-box .top-box figure {
    width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.container-blog-home .left-box .top-box figure img {
    width: 100%;
    height: 400px;
}

.container-blog-home .left-box .top-box figure:hover img {
    scale: 1.2;
    transition: all 800ms ease;
}

.container-blog-home .left-box .top-box figure figcaption {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    display: flex;
    align-items: end;
    color: white;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.6));
    padding: 20px;
}

.container-blog-home .left-box .top-box figure:hover figcaption {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    display: flex;
    align-items: end;
    color: white;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
    padding: 20px;
}

.container-blog-home .left-box .bottom-box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 40px;
}

.container-blog-home .left-box .bottom-box figure {
    width: calc(100% / 2 - 10px);
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.container-blog-home .left-box .bottom-box figure img {
    width: 100%;
    height: 200px;
}

.container-blog-home .left-box .bottom-box figure:hover img {
    scale: 1.2;
    transition: all 800ms ease;
}

.container-blog-home .left-box .bottom-box figure figcaption {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    display: flex;
    align-items: end;
    color: white;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.6));
    padding: 20px;
}

.container-blog-home .left-box .bottom-box figure:hover figcaption {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    display: flex;
    align-items: end;
    color: white;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
    padding: 20px;
}


.container-blog-home .right-box {
    width: 30%;
}

.container-blog-home .right-box figure {
    width: 100%;
    position: relative;
    margin-top: 20px;
    overflow: hidden;
    border-radius: 8px;
}

.container-blog-home .right-box figure:first-of-type {
    margin: 0;
}

.container-blog-home .right-box figure img {
    width: 100%;
    height: 200px;
}

.container-blog-home .right-box figure:hover img {
    scale: 1.2;
    transition: all 800ms ease;
}

.container-blog-home .right-box figure figcaption {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    display: flex;
    align-items: end;
    color: white;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.6));
    padding: 20px;
}

.container-blog-home .right-box figure:hover figcaption {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    display: flex;
    align-items: end;
    color: white;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1));
    padding: 20px;
}

@media screen and (max-width:720px) {
    .container-blog-home .left-box {
        width: 100%;
    }

    .container-blog-home .left-box .bottom-box figure {
        width: 100%;
    }

    .container-blog-home .right-box {
        width: 100%;
    }
}