.brandBannerDiv {

    --gap: 3em;
    --num-cols: 5;
    --row-height: 35em;
    display: grid;
    box-sizing: border-box;
    padding: var(--gap);
    grid-template-columns: repeat(var(--num-cols), 1fr);
    grid-auto-rows: var(--row-height);
    gap: var(--gap);
}

.brandLabelSection {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    grid-column: span 2;
    margin-left: 1.5em;
}

.brandLabelSection img {
    max-width: 70%;
    max-height: 25%;
}

.brandLabelSection button {
    max-width: 32%;
    height: 56.71px;
    background: #291C61;
    border-radius: 5px;
    color: #fff;
}

.sectionText {
    display: flex;
    flex-direction: column;
}

.sectionTitle {
    
    font-style: normal;
    font-weight: 600;
    font-size: 3.5em;
    line-height: 1.2em;
    color: #291C61;
    max-width: 70%;
}

.sectionSubTitle {
    
    font-style: normal;
    font-weight: 600;
    font-size: 1.5em;
    line-height: 38px;
    text-transform: uppercase;
    color: #323232;
}

.sliderContainer {
    margin: 0 auto;
    width: 100%;
    grid-column: span 3;
}

@media (max-width: 1536px) {
    .sectionTitle {
        max-width: 75%;
        font-size: 3.2em;
    }

    .brandLabelSection button {
        max-width: 42%;
    }
}

@media (max-width: 768px) {
    .sectionTitle {
        max-width: 100%;
        font-size: 2.5em;
    }

    .brandLabelSection button {
        max-width: 80%;
    }

    .brandLabelSection {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        margin-left: 0em;
    }


    .brandBannerDiv {
        margin-top: 5em;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 1.5em;
    }


    .sliderContainer{
        max-height: 15em;
        height: 15em;
    }
}