div.landing {
    padding:var(--padding-v) var(--padding-h);
    min-height:80vh;
    display: grid;
    place-content: end center;
    .title--1{
        --max-size:48;
        --min-size:25;
    }
    .title--2{
        font-family:var(--font1);
        font-weight: var(--bold1);
        background: var(--primary);
        margin:0;
        padding: 12px 16px;
        --max-size: 28;
        --min-size: 20;
    }
    .title--4{
        font-family:var(--font1);
        font-weight: var(--bold1);
        margin:0;
        --max-size: 24;
        --min-size: 20;
    }
    .landing__inner{
        background: rgba(255,255,255,.75);
        padding: var(--padding-inner);
        color:var(--contrast);
    }
    .landing__container{
        max-width: 850px;
    }
    .landing__img{
        display: none;
    }
    .landing__list{
        margin:0 0 1.5rem;
    }
    .landing__list .title{
        font-family: var(--font1);
        font-weight: var(--bold3);
        --max-size:25;
        --min-size:20;
        margin:0;
        display: flex;
        flex-direction: column;
        gap:0.5rem;
        align-items: center;
        padding: 1rem;
        background: #fff;
    }
    
        .landing__list .title strong{
            display: block;
            color:var(--primary);
        }
    .landing__list .title:last-child{
        margin: 0;
    }
    .landing__list .title::before{
        font-family: var(--awesome);
        font-size: 1.5em;
        font-weight: 900;
        width:1.5em;
        height:1.5em;
        display: grid;
        place-content: center;
        text-align:center;
    }
    .landing__list .title:nth-child(1)::before{
        content:'\f0e3';
    }
    .landing__list .title:nth-child(2)::before{
        content:'\f5e1';
    }
  
    @media (max-width: 768px) {
        min-height: auto;
        padding: 0;
        background-image:none;
        .landing__img{
            display: block;
        }
       .title--1{
           position: absolute;
           transform: translateY(-100%);
           padding: 1rem;
           text-shadow: 0px 1px 8px rgba(0,0,0,0.75),  0px 0px 4px rgba(0,0,0,0.5);
        }
        .landing__inner{
            border-bottom: 1px solid;
        }
        .landing__inner p{
            margin:0;
        }
        .landing__list .title{
           padding:0;
           background:none;
           flex-direction:row;
           text-align: left;
           gap:0.75rem;
        }
    }
    @media (max-width: 768px) {
        .landing__buttons .open-modal {
            height:44px;
            width:44px;
            display: grid;
            place-content: center;
        }
        .landing__buttons .open-modal strong{
            display: none;
        }
        .landing__buttons .open-modal i{
            margin:0;
        }
    }
    
}