/* hero-section */

#hero-section {
    margin-top: 6rem;

    display: flex;
    flex-direction: column;
    gap: 2rem;

    width: calc(100% - var(--page-margin-x) * 2);


}



#hero-section .title {

    font-size: var(--h1-size);
    font-weight: bold;
    grid-column-start: 1;
    grid-column-end: 2;

}

#hero-section .sub-title {
    font-size: var(--p-size);
    grid-column-start: 1;
    grid-column-end: 2;

}



#hero-section .image {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row: 3 span;
}



#hero-section .image img {
    width: 100%;
    height: 100%;
    max-height: 500px;
    object-fit: contain;
}

#hero-section .cta {
    width: 100%;
}



@media (min-width: 768px) {
    #hero-section {
        margin-top: 8rem;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, auto);
        min-height: 500px;
        line-height: 1.5;
    }

    #hero-section .title {
        grid-column-start: 1;
        grid-column-end: 2;

    }

    #hero-section .sub-title {

        grid-column-start: 1;
        grid-column-end: 2;

    }

    #hero-section .cta-container {
        grid-column-start: 1;
        grid-column-end: 2;
    }

    #hero-section .cta {
        grid-column-start: 1;
        grid-column-end: 2;
        width: fit-content;
        height: fit-content;
    }
}