body {
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
    background-color: #F7EFE2;
}

#background {
    display: flex;
    justify-content: center;
    max-width: 1440px;
    background-color: #37280D;
    padding-left: 80px;
    padding-right: 80px;
}

#hero {
    width: 100%;
    background-color: #F8FFEA;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#hero p {
    font-size: 1.3rem;
}

h1 {
    margin-bottom: 20px;
    font-size: 2rem;
}

#hero-header {
    display: flex;
    align-items:center;
    gap: 5px;
}

#about-wrapper {
    background-color: #F7EFE2;
    padding: 25px;
}

#about {
    padding: 40px;
    background-color: #c5b8a1;
    display: flex;
    justify-content: space-between;
    border-radius: 2px;
    gap: 25px;
    max-height: 700px;
}

#about .flex-col {
    max-width: 60%;
}


#mobile-img-container {
    padding: 40px;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 200px;
}

#mobile-wrapper {
    display: none;
}

#img-container {
    padding: 40px;
    border-radius: 2px;
    background-color: #BFC9A9;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

#wrapper {
    display: flex;
    justify-content: flex-end;
}

@media (min-width: 320px) and (max-width: 480px){
    #background {
        padding-left: 25px;
        padding-right: 25px;
    }

    #mobile-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        text-align: center;
    }

    #mobile-img-container {
        max-width: fit-content;
    }

    #hero {
        gap: 25px;
        padding: 25px;
    }

    #hero-header{
        justify-content: center;
    }

    #hero > p {
        display: none;
    }

    #about {
        padding: 25px;
        max-height: fit-content;
    }

    #about .flex-col {
        max-width: fit-content;
    }

    #about .flex-col .gap5 {
        justify-content: center;
    }

    #wrapper {
        display: none;
    }

}


@media (min-width: 481px) and (max-width: 768px){
    #background {
        padding-left: 25px;
        padding-right: 25px;
    }

    #mobile-wrapper {
        display: none;
    }

    #wrapper {
        display: none;
    }

    #about .flex-col {
        max-width: fit-content;
    }

    #about {
        max-height: fit-content;
    }

}


@media (min-width: 769px) and (max-width: 1024px) {
    #mobile-wrapper {
        display: none;
    }

    #wrapper {
        display: none;
    }

    #about .flex-col {
        max-width: fit-content;
    }

    #about {
        max-height: fit-content;
    }
}

@media (min-width: 1025px) and (max-width: 1330px) {
    #mobile-wrapper {
        display: none;
    }

    #about .flex-col {
        max-width: fit-content;
    }

    #about {
        max-height: fit-content;
    }

    #img-container {
        min-height: 100%;
    }

    img {
        min-height: 100%;
    }
}