/*
|--------------------------------------------------------------------------
| HERO
|--------------------------------------------------------------------------
*/

.hero-image-banner[data-main-banner-1] {
    margin-block-start: -30px;
}

.hero-image-banner[data-main-banner-1] .img-container {
    background-image: url(../images/hero-banner-large.webp);
    color: var(--on-background);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    aspect-ratio: 317 / 110;
}

.section-category {
    padding-block: 20px;
}

.hero-image-banner[data-main-banner-2] {
    margin-block-start: 0;
}

.hero-image-banner[data-main-banner-2] .img-container {
    cursor: pointer;
    background-image: url(../images/banner-static.webp);
    color: var(--on-background);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    aspect-ratio: 317 / 110;
    margin-block-end: -30px;
}

@media (min-width: 600px) {
    /*
    .hero-image-banner[data-main-banner-1] .img-container {
        background-image: url(../images/hero-banner-medium.webp);
    }
    */
}

@media (min-width: 992px) {
    /*
    .hero-image-banner[data-main-banner-1] .img-container {
        background-image: url(../images/hero-banner-large.webp);
    }
    */
}

/*
|--------------------------------------------------------------------------
| PROVIDERS
|--------------------------------------------------------------------------
*/

.providers-section-title {
    gap: 8px;
    justify-content: center;
    align-items: center;
    display: flex;
    color: var(--primary);
    text-align: center;
    font-size: var(--fs-display-small);
    font-weight: var(--weight-regular);
    font-family: var(--font-title-2);
    line-height: 38px;
}

.providers-section-title img {
    height: 36px;
}

.section-category {
    margin-block-end: 0;
    background-color: var(--white);
}

/*
|--------------------------------------------------------------------------
| MEDIA QUERIES
|--------------------------------------------------------------------------
*/

/* responsive for larger than 600px screen */

@media (min-width: 600px) {
    .providers-section {
        margin-block: 0;
    }
}