.month-day-sale {
     padding-bottom: 40px;
     float: none;
     clear: both;
}

.month-day-sale ul {
     display: grid;
     gap: 15px;
     grid-template-columns: repeat(5, 1fr);
}


.month-day-sale ul li {
     width: 100%;
     padding: 50px 10px 20px;
     border-radius: 20px;
     overflow: hidden;
     z-index: 1;
     position: relative;
     background: #264a7d;
}

.month-day-sale ul .offer-closed {
     opacity: 0.2;
     filter: grayscale(1);
}

.month-day-sale ul .offer-live {
     opacity: 1;
}

.month-day-sale ul .offer-coming {
     opacity: 0.8;
}

.month-day-sale ul li::after {
     content: "";
     width: 115%;
     height: 70px;
     left: -7.5%;
     bottom: -1px;
     position: absolute;
     background: #dfefff;
     border-radius: 50% 50% 0 0 / 100% 100% 0 0;
     z-index: -1;
}

/* option spikes */
.offer-badge {
     width: 90px;
     left: -12px;
     top: 20px;
     text-align: center;
     font-size: 14px;
     font-weight: 500;
     padding: 2px;
     color: #264a7d;
     transform: rotate(-45deg);
     position: absolute;
     background: #a0e4cd;
}

.offer-badge::before,
.offer-badge::after {
     content: '';
     width: 0;
     height: 0;
     position: inherit;
     border: solid;
     border-color: transparent;
}

.offer-badge::before {
     border-left: unset;
     border-width: 15px 15px 0;
     border-right-color: #a0e4cd;
     left: -14px;
     bottom: 0px;
}

.offer-badge::after {
     border-right: unset;
     border-width: 15px 0 0 15px;
     border-left-color: #a0e4cd;
     right: -14px;
     bottom: 0px;
}

.offer-nums {
     font-weight: 600;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
}

.offer-nums .nums {
     font-size: 90px;
     line-height: 1;
}

.offnums {
     font-size: 40px;
     font-weight: bold;
}

.offnums .offSign,
.offnums .offTxt {
     line-height: .9;
}

.offer-dates {
     padding-top: 40px;
     line-height: 1;
     font-size: 28px;
     font-weight: 600;
     text-align: center;
     color: #264a7d;
}

.offer-dates span {
     font-size: 24px;
}

@media (max-width: 1149px) {
     .month-day-sale ul {
          gap: 10px;
     }

     .month-day-sale ul li {
          padding: 40px 10px 15px;
     }

     .offer-nums .nums {
          font-size: 72px;
     }

     .offnums {
          font-size: 32px;
     }

     .offer-dates {
          padding-top: 35px;
     }

     .month-day-sale ul li::after {
          height: 64px;
     }
}

/* Tablet */
@media (max-width: 991px) {
     .month-day-sale ul {
          grid-template-columns: repeat(4, minmax(0, 1fr));
     }

     .offer-nums .nums {
          font-size: 64px;
     }

     .offnums {
          font-size: 28px;
     }

     .month-day-sale ul li::after {
          height: 60px;
     }

     .offer-dates {
          padding-top: 30px;
          font-size: 24px;
     }

     .offer-dates span {
          font-size: 20px;
     }

     /* these are not currently used on html */
     .offer-hides {
          display: none;
     }
}

/* Small tablet */
@media (max-width: 767px)  and (min-width: 540px){
     .month-day-sale ul {
          grid-template-columns: repeat(3, minmax(0, 1fr));
     }

     .offer-nums .nums {
          font-size: 60px;
     }

     .offnums {
          font-size: 26px;
     }

     .offer-dates {
          padding-top: 20px;
     }

     .month-day-sale ul li::after {
          height: 54px;
     }
}

@media (max-width: 539px) {
     .month-day-sale ul {
          grid-template-columns: repeat(2, minmax(0, 1fr));
     }


}

/* Mobile */
@media (max-width: 399px) {
     .month-day-sale ul li::after {
          height: 60px;
     }

     .offer-badge {
          font-size: 12px;
          left: -16px;
          top: 16px;
     }

     .offer-dates {
          padding-top: 26px;
     }

     .offer-nums .nums {
          font-size: 60px;
     }

     .offnums,
     .offer-dates {
          font-size: 26px;
     }

     .offer-dates span {
          font-size: 22px;
     }
}

@media (max-width: 359px) {
     .offer-nums .nums {
          font-size: 48px;
     }

     .offnums,
     .offer-dates {
          font-size: 20px;
     }

     .offer-dates span {
          font-size: 18px;
     }

     .offer-dates {
          padding-top: 20px;
     }

     .month-day-sale ul li::after {
          height: 50px;
     }

}