react-hartan/Components/Hero/Hero.module.css

A simple components library for React

/* Hero Section CSS Module */

/* hero section container */
.heroSection {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8rem;
    gap: 5rem;
}

/* content container */
.heroSectionAbout {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    gap: 3rem;

}

.heroSectionAbout h1 {
    font-size: 4rem;
}

.heroSectionAbout div {
    font-size: 1.5rem
}

/* image container */
.heroImage {
    display: flex;
    justify-content: center;
    align-items: center;
}

.heroImage img {
    height: 30rem;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .heroSection {
        flex-direction: column;
        padding: 4rem;
    }
}