@import url('fonts.css');
@import url('colors.css');
@import url('gallery.css');


#car-opening {
    display: flex;
    min-width: 15rem;
    padding: 0;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sds-size-space-600);
    align-self: stretch;
}



#opening-text-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1.5rem;
    width: 40%;
    padding: 1rem 2rem;
}



#opening-text-box h1 {
    color: var(--text-color);


    font-family: Inter;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: 120%;
    letter-spacing: -0.03rem;
    margin: -1rem 0;
    padding: 0;
}




#opening-text-box h2 {
    color: var(--text-color);
    font-family: Inter;
    font-size: 3rem;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 3rem */
    letter-spacing: -0.06rem;
    display: inline;
    margin: 0;
    padding: 0;
}



#opening-text-box h3 {
    color: var(--text-color);
    font-family: Inter;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 1.5rem */
    letter-spacing: -0.03rem;
    display: inline;
    margin: 0;
    padding: 0;
}



#opening-text-box small {
    color: #757575;

/* Body Base */
font-family: Inter;
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 140%; /* 1.4rem */
}



@media (max-width: 560px) { 


#car-opening {
    display: flex;
    min-width: 0;
    padding: 0;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 1.5rem;
    align-self: stretch;
    

}



#opening-text-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1.5rem;
    width: 100%;
    padding: 0;
}


}




h4 {
    color: var(--background, #FFFBFA);
    font-family: Inter;
    font-size: 0.9rem;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 1.1375rem */

    border-radius: 0.5rem;

    padding: 0.25rem 1rem;
    margin: -0 0;

}

h4.sale {
    background: var(--contrast, #FF5733);
}

h4.rent {
    background: var(--complement, #9747FF);}

h4.immRent {
    background: var(--main, #0D99FF);

}