#mainwrapper{
    background: var(--light-grey);
    color: var(--text-color);
    padding-bottom: 100px;
}
.page_wrapper{
    width: calc(100% - 20px);
    margin: 10px auto;
    padding: 10px 0;
}

p{font-size: 14px; }

.hero_section{
    width: 100%; 
    
    position: relative;
    background: var(--text-color);
    border-radius: 20px; 
    overflow: hidden;
    margin-bottom: 10px;
}

.hero_section .grid > div:nth-child(1){
    position: relative;
    min-height: 60vh;
}

.hero_section .grid > div:nth-child(2){
    background: white;
    color: var(--text-color);
    display: flex;
    flex-direction:column;
    justify-content: center;
}

.hero_section .text_wrapper{
    padding: 10vw;
}

.hero_section .text_wrapper h1{
    padding: 0; margin: 0; line-height: 1em;
    font-weight: 700;
    font-size: 38px;
    letter-spacing: -.03em;
    font-family: 'Kleemax';
}

.hero_section .text_wrapper h2{
    font-size: 20px;
    padding: 0; margin: 0; line-height: 1em;
}

.section{position: relative;}
.section > *{position: relative;}

.background_image{
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background-size: cover!important; 
    background-position: center!important;
}

.deck{
    
    border-radius: 20px;
    margin-bottom: 20px;
}

.deck.white{
    background: white;
}

.deck .grid{
    gap: 10px; 
    padding: 10px;
 }

#deck_2 .grid > div{
    height: 100%; 
    background-size: cover!important; 
    background-position: center!important;
}

img{width: 100%; border-radius: 15px;}

section .list{
    padding: 10px;
}

p, .dark p, h1, .dark h1, h2, .dark h2, h3, .dark h3{color: var(--text-color);}


.cards{
    padding: 10px;
}

.cards > div{
    height: 100%; 
    background: white; 
    border-radius: 10px; 
    padding: 10px;
    margin-bottom: 10px; 
    
    border: 4px solid white;
    position: relative;
}

.cards > div.highlight{
    background: var(--primary-color);
}

.cards > div a.button{
        bottom: 10px; 
        left: 10px; 
    }

.cards h1{line-height: 1em; padding: 0; margin: 0; }

@media(min-width: 740px){

    .hero_section .grid{
        height: 100%; 
        grid-template-columns: 6fr 4fr;
        
        color: var(--text-color);
        
    }

    .hero_section{
        margin-bottom: 20px;
        
        
    }

    .hero_section .grid > div{position: relative;}

    .page_wrapper{
        width: calc(100% - 40px);
        margin: 20px auto;
        
    }

    .hero_section .grid > div:nth-child(1){
        min-height: initial;
    }

    .hero_section .text_wrapper h1{
        font-size: 5vw;

    }

    .hero_section .text_wrapper h2{
        font-size: 2vw;

    }

    p{font-size: 16px; }

    p .price{
        font-size: 2em; 
        font-weight: 700;
    }

    .deck{margin-bottom: 20px;}

    .deck .grid{
        gap: 20px; 
        padding: 20px;
    }

    section .text_wrapper{
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        padding: 0 7vw;

    }


    section .list{
        padding: 20px;
    }


    .cards{
        
    }

    .cards.cards_3{
        gap: 20px;
        display: grid; 
        grid-template-columns: 1fr 1fr 1fr;
    }

    .cards > div{
        height: 100%; 
        border-radius: 20px; 
        padding: 20px;
        padding-bottom: 20px;
        overflow: hidden;
        
    }

   

    .cards > div a.button{
        position: absolute; 
        bottom: 20px; 
        left: 30px; 
    }

    .grid.inverse > div:nth-child(1){
        grid-column: 2/3;
        grid-row: 1/2;
    }

    .grid.inverse > div:nth-child(2){
        grid-column: 1/2;
        grid-row: 1/2;
    }

}

.list{

}



.list .list_item{
    padding: 5px 0;
    border-bottom: 1px solid var(--text-color);
}

.list .list_item.head{
    border-bottom: 4px solid var(--text-color);
}

.price_grid{
    display: grid; 
    grid-template-columns: 1fr 100px;
}

ul.options{
    padding: 0; margin:  10px 0;
    text-indent: 0;
    border-top: 1px solid var(--text-color);
}

ul.options li{
    list-style: none; 
    padding: 5px 0; 
    margin: 0; 
    border-bottom: 1px solid var(--text-color);
}

 .card .node{
        position: absolute; 
        top: 0; right: 0; 
        padding: 15px; 
        background: white; 
        border-bottom-left-radius: 20px; 
        
    }