/* --------------------------------------------- */
/* -------------------- ALL -------------------- */
/* --------------------------------------------- */


/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------- MOBILE ---------------------------------------- */
/* ---------------------------------------------------------------------------------------- */

/* ---------------------------------------------- */
/* -------------------- MAIN -------------------- */
main{
    h1{
        font-family: "Parisienne", serif;
        text-align: center;
        padding: 3% 0;
        color: #8b5e3c;
    }
    section{
        width: 90%;
        margin: 0 auto 7% auto;
        .owl-carousel{
            div{
                img{
                    width: 100%;
                    height: 270px;
                    background-position: bottom;
                    object-fit: cover;
                    padding: 1%;
                }
            }
        }
        #about{
            width: 90%;
            margin: auto;
            p{
                padding: 1% 0;
            }
            .hidden {
                display: block;
                max-height: 0;
                overflow: hidden;
                transition: all .8s linear;
            }
            .toggle-button{
                all: unset;
                cursor: pointer;
                display: block;
                margin: 1% auto;
                color: #8b5e3c;
            }
        }
    }
}



/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------- TABLET ---------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
@media screen and (min-width:768px) and (max-width:1024px) {
    /* ---------------------------------------------- */
    /* -------------------- MAIN -------------------- */
    main{
        section{
            width: 80%;
            #about{
                width: 100%;
                .hidden {
                    max-height: none;
                    overflow: visible;
                }
                .toggle-button{
                    display: none;
                }
            }
        }
    }

}

/* ----------------------------------------------------------------------------------------- */
/* ---------------------------------------- DESKTOP ---------------------------------------- */
/* ----------------------------------------------------------------------------------------- */
@media screen and (min-width:1024px) {
    /* ---------------------------------------------- */
    /* -------------------- MAIN -------------------- */
    main{
        section{
            width: 60%;
            #about{
                width: 100%;
                p{
                    padding: 1% 0;
                }
                .hidden {
                    max-height: none;
                    overflow: visible;
                }
                .toggle-button{
                    display: none;
                }
            }
        }
    }
}