:root {
    --BannerImage: url(../Images/Teste/Background_1.jpg);
    --BannerHeightDesktop: 950px;
    --BannerHeightTablet: 760px;
    --BannerHeightMobile: 667px;
}

.banner-outside{
    height: var(--BannerHeightDesktop);
    z-index: 0;
}

.banner-outside::before {
    content: "";
    position: absolute;
    width: 100%; 
    height: var(--BannerHeightDesktop);
    background-image: var(--BannerImage);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
  }

  .banner-inside {
    position: relative;
  }

.banner-top::before {
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1.0) 50%, transparent 100%);
    filter: brightness(50%);
}

.banner-bottom::before {
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 1.0) 50%, transparent 100%);
    filter: brightness(50%);
}

.banner-list{
    justify-content: space-between;
}

.banner-title{
    margin-top: 450px;
}

/* Menor do Desktop - Break to Tablet */
@media screen and (max-width: 1280px) {
    .banner-outside{
        height: var(--BannerHeightTablet);
    }
    .banner-outside::before {
        height: var(--BannerHeightTablet);
    }
    .banner-title{
        margin-top: 350px;
    }
}

/* Menor do Tablet - Break to Mobile */
@media screen and (max-width: 768px) {
    .banner-outside{
        height: var(--BannerHeightMobile);
    }
    .banner-outside::before {
        height: var(--BannerHeightMobile);
    }
    .banner-title{
        margin-top: 250px;
    }
}