.hero {
    width: 100%;
    position: relative;
    animation: drop-down 1s ease 200ms backwards;
}

.hero figure {
    width: 100%;
}

.hero figure img {
    width: 100%;
    height: 100%;
}

.hero article {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.hero article h1 {
    color: var(--blue-500);
    font-size: 40px;
    text-transform: uppercase;
}

.hero article p {
    color: white;
    font-size: 20px;
    text-transform: uppercase;
    margin-top: 20px;
}

.hero-product {
    width: 100%;
    position: relative;
}

.hero-product figure {
    width: 100%;
}

.hero-product figure img {
    width: 100%;
    height: 100%;
}

.hero-product figcaption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.hero-product figcaption h1 {
    color: var(--blue-500);
    font-size: 40px;
    text-transform: uppercase;
}

.hero-product figcaption p {
    color: white;
    font-size: 20px;
    text-transform: uppercase;
    margin-top: 20px;
}

.hero-service {
    width: 100%;
    position: relative;
}

.hero-service figure {
    width: 100%;
}

.hero-service figure img {
    width: 100%;
    height: 100%;
}

.hero-service figcaption {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.hero-service figcaption h1 {
    color: var(--blue-500);
    font-size: 40px;
    text-transform: uppercase;
}

.hero-service figcaption p {
    color: white;
    font-size: 20px;
    text-transform: uppercase;
    margin-top: 20px;
}

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

.container-hero-blog .left-box {
    width: calc(100% - 420px);
}

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

.container-hero-blog .left-box figure img {
    width: 100%;
    height: 820px;
}

.container-hero-blog .left-box figure:hover img {
    scale: 1.2;
    transition: all 850ms ease;
}

.container-hero-blog .left-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-hero-blog .left-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-hero-blog .right-box {
    width: 400px;
    display: flex;
    flex-wrap: wrap;
}

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

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

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

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

.container-hero-blog .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.5));
    padding: 20px;
}

.container-hero-blog .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.3));
    padding: 20px;
}

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

    .container-hero-blog .left-box figure {
        height: 600px;
    }

    .container-hero-blog .left-box figure img {
        height: 600px;
    }

    .container-hero-blog .right-box {
        width: 100%;
        gap: 20px;
    }

    .container-hero-blog .right-box figure {
        width: calc(100% / 2 - 10px);
        margin: 0;
    }
}


@media screen and (max-width:720px) {
    .hero article {
        width: 100%;
        padding: 20px;
    }

    .hero article h1 {
        color: var(--blue-500);
        font-size: 40px;
        text-transform: uppercase;
    }

    .hero article p {
        color: white;
        font-size: 20px;
        text-transform: uppercase;
        margin-top: 20px;
    }

    .hero-service figcaption {
        width: 100%;
        padding: 20px;
    }

    .hero-service figcaption h1 {
        color: var(--blue-500);
        font-size: 40px;
        text-transform: uppercase;
    }

    .hero-service figcaption p {
        color: white;
        font-size: 20px;
        text-transform: uppercase;
        margin-top: 20px;
    }


    .hero-product figure img {
        width: 100%;
        height: 100%;
    }

    .hero-product figcaption {
        top: 10%;
        transform: translatex(-50%);
        width: 100%;
    }
}