.main-menu .macro-menu {
    cursor: default;
    overflow: hidden;
    flex-direction: column;
    opacity: .95;
    display: flex;
    width: 100vw;
    position: absolute;
    top: 36px;
    left: 0px;
    justify-content: center;
    transition: max-height 350ms;
    padding-top: 0;
    max-height: 0
}

.main-menu .macro-menu.show {
    max-height: 590px;
    padding-top: var(--spacing-20)
}

.main-menu .macro-menu .menu-content {
    display: flex;
    overflow: hidden;
    height: 0;
    justify-content: center;
    background-image: linear-gradient(to top, var(--secondary-1), var(--secondary-13))
}

.main-menu .macro-menu .menu-content .block {
    height: fit-content
}

.main-menu .macro-menu .menu-content .macro-cards {
    display: flex;
    flex-wrap: wrap;
    max-width: 1120px
}

.main-menu .macro-menu .menu-content .macro-cards .macro-card {
    margin-bottom: var(--spacing-24);
    margin-right: 1.756vw;
    opacity: 1;
    width: 11.859vw;
    border-bottom: none;
    position: relative;
}

@media(min-width: 1359.5px) {
    .main-menu .macro-menu .menu-content .macro-cards .macro-card {
        margin-right: var(--spacing-24);
        width: 162px
    }
}

.main-menu .macro-menu .menu-content .macro-cards .macro-card:hover .card-image {
    transform: scale(1.1)
}

.main-menu .macro-menu .menu-content .macro-cards .macro-card .card-image {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    transition: all .15s ease-in-out
}

.main-menu .macro-menu .menu-content .rebates {
    position: relative;
    margin-left: 0;
    margin-right: 1.756vw;
    display: flex;
    flex-direction: column;
    flex-grow: 0;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    width: 10.24vw;
    height: 11.42vw
}

@media(min-width: 1359.5px) {
    .main-menu .macro-menu .menu-content .rebates {
        margin-right: var(--spacing-24);
        width: 140px;
        height: 156px
    }
}

.main-menu .macro-menu .menu-content .rebates:hover .more-info {
    background-color: var(--primary-3)
}

.main-menu .macro-menu .menu-content .rebates img {
    height: 100%;
    width: auto;
    max-width: 100%;
    max-height: 100%
}

.main-menu .macro-menu .menu-content .rebates .more-info {
    color: var(--primary-9);
    display: flex;
    flex-shrink: 0;
    border: solid 1px var(--primary-9);
    border-radius: 60px;
    align-items: center;
    justify-content: center;
    font-size: .879vw;
    width: 7.766vw;
    height: 1.759vw;
    box-sizing: border-box;
    cursor: pointer
}

@media(min-width: 767.5px) {
    .main-menu .macro-menu .menu-content .rebates .more-info {
        font-size: 10px;
        width: 89px;
        height: var(--spacing-32)
    }
}

.main-menu .macro-menu .menu-content .cards {
    display: none;
    flex-wrap: wrap;
    height: min-content
}

@media(min-width: 1023.5px) {
    .main-menu .macro-menu .macro-active {
        height: max-content;
        padding: var(--spacing-32) var(--spacing-32) var(--spacing-8)
    }
}

.main-menu.mm-top-padding {
    padding-top: 10px
}