.bannertext { grid-area: bannertext; }
.introtext { grid-area: introtext; }
.bookbutton { grid-area: bookbutton; }
.meetus { grid-area: meetus; }
.member1 { grid-area: member1; }
.member2 { grid-area: member2; }
.member3 { grid-area: member3; }
.member4 { grid-area: member4; }
.member5 { grid-area: member5; }
.member6 { grid-area: member6; }
.member7 { grid-area: member7; }
.member8 { grid-area: member8; }
.member9 { grid-area: member9; }
.member10 { grid-area: member10; }

article > div{
    /* border: 2px dashed black; */
    padding: 10px;
}
article > div > *{
    /* border: 2px dashed black; */
    padding: 10px;
}

.bookbutton{
    display: flex;
    justify-content: center;

}
.bookbutton a:hover{
    transform: scale(1.05);
}

.bookbutton a {
    color: rgb(255, 255, 255);
    background-color: black;
    text-align: center;
    padding: 10px;
    border-radius: 20px;
    border: black solid;
    width: fit-content;
    height: auto;
    display: inline-block;
    transition: transform 0.3s ease;
}

.charm {
    font-family: charm;
    font-size: 5em;
}
.bannertext{
    font-size: 1vw;
    margin: auto;
}


@media (min-width: 800px) {
    .burgmenu{
        display: none;
    }
    article{
      margin: 0px 15%;
    }

    article {
        display: grid;
        /* gap: 10px; */
        grid-template-areas: 
            'bannertext bannertext'
            'introtext introtext'
            'bookbutton bookbutton'
            'meetus meetus'
            'member1 member2'
            'member3 member4'
            'member5 member6'
            'member7 member8'
            'member9 member10';
    }
        article > div{
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 1em;
        min-width: 50%;
    }
    .introtext{
        font-size: 1.7em;
    }
    /* .introtext img {
        max-width: 50%;
        height: auto;
        object-fit: contain;
    } */
}
@media (max-width: 800px)  {
    .rightmenu{
        display: none;      
    }
    article {
      margin: 0px 4%;
    }

    article {
        display: grid;
        /* gap: 10px; */
        grid-template-areas: 
            'bannertext'
            'introtext'
            'bookbutton'
            'meetus'
            'member1'
            'member2'
            'member3'
            'member4'
            'member5'
            'member6'
            'member7'
            'member8'
            'member9'
            'member10';
    }
    .introtext{
        display: flex;
        flex-direction: column;
    }

}