.banner {
    /* background: linear-gradient(180deg, #A7CFDB 0%, #E7EEF1 100%); */
    /* color: white; */
    background-image: url(/credit-cards/transformer/img/cash-back/banner-cash-back-refresh.webp);
    background-repeat: no-repeat;
    background-position: right;
}

.banner-wpr {
    min-height: 515px !important;
}

.banner-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 15px;
}

.banner-content > * {
    max-width: 568px;
}

h2.banenr-header {
    color: white;
    font-size: 56px;
    font-weight: 500;
    line-height: 62px;
    letter-spacing: -2px;
}

p.banenr-desc {
    color: white;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

@media screen and (min-width: 1920px) {
    .banner {
        background-position: center;
        background-size: contain;
    }
}

@media screen and (max-width: 1200px) {

    .banner-wpr {
        display: flex !important;
        align-items: center;
    }

    .banner-content {
        margin: 0;
        width: fit-content;
        height: fit-content;
        background-color: rgba(0,0,0,0.2);
        margin-left: 15px;
    }
}

@media screen and (max-width: 640px) {
    .banner {
        background-image: url(/credit-cards/transformer/img/cash-back/banner-cash-back-refresh-m.webp);
        background-position: top;
        background-size: cover;
    }

    .banner-wpr {
        min-height: 600px !important;
        align-items: flex-end;
    }

    .banner-content {
        padding-top: 60px;
        background: linear-gradient(to top, #80A6BB 70%, transparent 100%);
        margin-left: 0;
    }

    h2.banenr-header {
        font-size: 28px;
        font-weight: 500;
        line-height: 35px;
    }
}

#card-grid-container {
    display: flex !important;
    justify-content: center;
}

.card-container {
    max-width: 468px;
}

.card-pad {
    padding-bottom: 20px;
}

.card-action-container {
    gap: 24px;
    margin-top: 16px;
}

.card-action-container > * {
    flex: 1;
    width: 100%;
    display: flex !important;
    align-self: stretch;
    align-items: center;
    justify-content: center;
}

.btn-compare:before {
    outline: 1px solid #6F6F6F;
}

.card-details-annual-fee {
    font-size: 24px;
    font-style: normal;
    font-weight: 500;
    line-height: 32px;
}

.card-details-rate-item-value {
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px; 
}

@media screen and (max-width: 768px) {
    #card-grid-container {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .card-container {
        max-width: unset;
    }

    .card-action-container {
        flex-direction: column;
        gap: 16px;
    }
}

#need-to-know {
    &.section-tabs .tab-content {
        border: none !important;
        background: transparent;
    }

    &.section-tabs .tab-nav {
        flex-direction: column;
    }

    &.section-tabs .tab-nav li.active a:after {
        height: 0px;
    }

    &.section-tabs .tab-nav li:before {
        width: 0px;
    }

    &.section-tabs .tab-nav li {
        border-left: 1px solid #B3B3B3;
    }

    &.section-tabs .tab-nav li.active {
        background: transparent;
        border: none;
        border-left: 2px solid #006AC3;
    }

    &.section-tabs .tab-nav li a {
        color: #6F6F6F;
    }

    &.section-tabs .tab-nav li.active a {
        color: #006AC3;
    }

    .need-to-know-content {
        display: flex;
        flex-direction: row;
    }

    .need-to-know-content > img {
        align-self: flex-end;
    }

    @media screen and (max-width: 640px) {
        &.section-tabs .tab-nav {
            display: flex;
            flex-direction: row;
            overflow-x: scroll;
        }

        &.section-tabs .tab-nav li a {
            white-space: nowrap;
            color: #006AC3;
        }

        &.section-tabs .tab-nav li.active a {
            color: #252525;
        }

        &.section-tabs .tab-nav li:not(:last-of-type) a {
            border-right: 1px solid #B3B3B3;
            padding-right: 8px;
        }

        &.section-tabs .tab-nav li {
            padding: 20px 8px !important;;
        }

        &.section-tabs .tab-nav li:not(:last-of-type) {
            padding-right: 0 !important;
        }

        &.section-tabs .tab-nav li {
            border: none !important;
        }

        &.section-tabs .tab-nav li.active {
            box-shadow: inset 0 -4px 0 0 #006ac3;
        }

        .tab-content {
            padding: 20px;
        }

        #how-to-apply .block-wpr {
            border: none !important;
        }

        .need-to-know-content {
            flex-direction: column;
        }

        .need-to-know-content > img {
            align-self: center;
        }
    }
}

#learn-more {
    .learn-more-tool {
        padding-top: 30px;
        padding-left: 20px;
        max-width: 370px;
        min-height: 200px;
        background-color: #FFF;
        border-radius: 8px;
    }

    .learn-more-tool:not(:first-child) {
        margin-left: 30px;
    }

    .learn-more-tool.cash-20 {
        background-image: url(/credit-cards/transformer/img/cash-back/img-cash-20.png);
        background-repeat: no-repeat;
        background-size: 202px 137px;
        background-position: right -45px bottom -20px;
    }

    .learn-more-tool.overlap-cards {
        background-image: url(/credit-cards/transformer/img/cash-back/img-overlap-cards.svg);
        background-repeat: no-repeat;
        background-size: 147px 138px;
        background-position: right 0 bottom 0;
    }

    .learn-more-tool.magnify-laptop {
        background-image: url(/credit-cards/transformer/img/cash-back/img-magnify-laptop.svg);
        background-repeat: no-repeat;
        background-size: 153px 116px;
        background-position: right 0 bottom 0;
    }

    .learn-more-tool-content {
        max-width: 248px;
    }
    
    .article-img {
        border-radius: 8px 8px 0 0;
        width: 100%;
        aspect-ratio: 370/167;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        height: 164px;
    }

    .article-content {
        padding: 20px;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    #guides-and-articles .grid-one-third {
        background-color: #FFF;
        border-radius: 8px;
        padding: 0;
        max-width: 370px;
    }

    #guides-and-articles .grid-one-third:not(:first-child) {
        margin-left: 30px;
    }

    @media screen and (max-width: 640px) {

        #guides-and-articles .flex {
            flex-direction: row;
            flex-wrap: nowrap;
        }

        .learn-more-tool:not(:first-child) {
            margin-left: 0;
        }

        .learn-more-tool {
            max-width: unset;
        }

        #guides-and-articles .grid-one-third {
            max-width: unset;
        }

        #guides-and-articles .grid-one-third:not(:first-child) {
            margin-left: 0;
        }
    }
}

#find-by-category {
    .category-item {
        display: flex;
        flex-direction: column;
        gap: 16px;
        border-radius: 8px;
        background-color: #FFF;
        padding: 24px;
        min-width: 370px;
    }
    
    .category-icon {
        width: 80px;
        height: 80px;
        padding: 24px;
        border: 1px solid #E0E0E0;
        border-radius: 100px;
    }

    .find-by-category-header {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .find-by-category-navigate {
        display: flex;
        flex-direction: row;
        gap: 10px;
    }

    .carousel-button.inactive {
        filter: brightness(0) saturate(100%) invert(90%) sepia(0%) saturate(48%) hue-rotate(339deg) brightness(124%) contrast(76%);
    }

    @media screen and (max-width: 640px) {
        .find-by-category-header {
            flex-direction: column;
        }

        .find-by-category-navigate {
            justify-content: flex-end;
        }

        .category-item {
            min-width: 260px;
        }
    }
}