#hero {
    text-align: center;
    background-image: linear-gradient(#00000026, #00000026),url("../img/hero.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: var(--white);
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10%;
}


#family{
    margin: 8% 0 12%;
}

#family, #method {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-items: center;
    gap: 2em;
}

#family-txt {
    grid-column: 1 / 6;
}

#family-img {
    grid-column: 6 / 13;
}

#family-img img {
    width: 100%;
    box-shadow: 20px 20px 0px rgba(184, 149, 60, 0.6);
}

#method-img {
    grid-column: 1 / 9;
    grid-row: 1;
}

#method-img img{
    width: 100%;
}

#method-txt {
    grid-column: 7 / 13;
    grid-row: 1;
    background: var(--white);
    padding: 50px;
    border: 1px solid rgba(184, 149, 60, 0.6);
    z-index: 2;
}

h3 {
    color: var(--gold);
    font-size: 2.2rem;
    margin-bottom: 0.7em;
}

@media (max-width: 1000px){
    #family{
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    #family-img {
        width: 100%;
    }

    #family-img img, #method-img img {
        box-shadow: none;
        margin-top: 5%;
    }

    #method{
        display: flex;
        flex-direction: column-reverse;
        gap: 0;
    }

    #method-txt {
        border: none;
        padding: 0;
    }

    h3{
        text-align: center;
    }
    
    main{
        gap: 3em;
    }
}