/* ==========================================================
   HERO
   ========================================================== */

.hero {

    padding: 8px 0px 0px 0px;

}

.hero-grid {

    display: grid;

    grid-template-columns: 1fr auto;

    grid-template-areas:
        "left image"
        "buttons buttons";

    gap: 0px 40px;

    align-items: center;

}

/* ==========================================================
   LEFT
   ========================================================== */

.hero-left {

    min-width: 0;

}

.hero-small{

    display:inline-block;

    margin-bottom:8px;

    color:var(--primary);

    font-size:.9rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.hero-text{

    max-width:650px;

    font-size:1.15rem;

    color:var(--text-muted);

}

.hero-left h1 {

    margin-bottom: 10px;

}

.hero-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-bottom: 20px;

}
.hero-buttonssmall {

 		display: none;

    }
.hero-features {

    display: flex;

    flex-wrap: wrap;

    gap: 12px 20px;

}

.hero-features span {

    font-weight: 600;

    color: var(--text);

}

.page-hero.hero-grid {

    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0px 20px;

}

.page-hero .hero-right {

    justify-self: end;

}

.page-hero .hero-image {

    height: clamp(200px, 32vw, 320px);
    width: auto;

}

.about-hero-image-wrap {
	justify-self: end;
}
.about-hero-image-wrap .hero-image {
    height: clamp(200px, 32vw, 320px);
    width: auto;
	vertical-align: bottom;
}

/* ==========================================================
   RIGHT
   ========================================================== */

.hero-right {

     display: flex;

    justify-content: center;

    align-self: start;

    transition: opacity .25s ease;

}

.faqs-hero-image,.hero-image img {

    display: block;

	height: clamp(140px, 50vw, 360px);
	
	width: auto;
    max-width: 100%;
    object-fit: contain;

}