main{
    background: var(--primary-1);
    display: grid;
}

/* Products - Services Brief */

.product-services-brief{
    padding-block: 15dvh;
}

.product-services-brief h1{
    align-self: end;
    margin-bottom: 1rem;
}

.product-services-brief .brief-text{
    align-self: start;
}

.product-services-brief .brief-text p{
    margin-bottom: .4rem;
}


.hero-header{
    display: grid;
    grid-template-columns: 1fr;
}

.full-width-img{
    height: 75dvh;
    position: relative;
    grid-row: 1;
    grid-column: 1;
}

.full-width-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-referral{
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: white;
    font-size: 12px;
}

.hero-title{
    grid-row: 1;
    grid-column: 1;
    z-index: 1;
    padding-inline: var(--wrapper-inline);
    padding-block: 10%;
    color: white;
    font-size: 2.5rem;
    -webkit-text-stroke-color: var(--text-color);
    -webkit-text-stroke-width: .1px;
}

#numbers{
    background: var(--primary-2);
}

/* Color Schemes and dark mode */

@media (prefers-color-scheme: dark) {
    .full-width-img img, .img-referral{
        display: none;
    }
    .full-width-img{
        background-color: var(--primary-2);;
    }
}

/* Responsive and mobile */

@media (max-width:1280px) {
    .hero-title{
        padding-inline: var(--wrapper-inline);
        padding-block: 20vh;
        font-size: 1.5rem;
    }    
}

@media (max-width:600px) {
    .hero-title{
        padding-inline: var(--wrapper-inline);
        padding-block: 20vh;
        font-size: 1.5rem;
    }    
}