.hero {
    padding: 120px 20px;
}

.hero-inner {
    width: 90%;
    gap: 60px;
    max-width: 1000px;
}

.hero-text {
    flex: auto;
    max-width: 400px;
    width: 70%;
}

.page-thum img {
    max-width: 450px;
    min-width: 350px;
    aspect-ratio: 5/3;
    object-fit: cover;
}

@media (max-width:600px) {
    .hero-inner {
        flex-direction: column;
    }

    .hero-text {
        flex: auto;
        max-width: 600px;
        width: 100%;
    }

    .page-thum img {
        max-width: 450px;
        min-width: 300px;
        aspect-ratio: 5/3;
        object-fit: cover;
        width: 100%;
    }
}