/* Style the buttons that are used to open and close the accordion panel */
.accordion {
    cursor: pointer;
    transition: 1s;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s ease-out;
    padding-bottom: 0;
}

.discount-tile {
    position: relative;
}

/* HTML: <div class="ribbon">Your text content</div> */
.discount-ribbon {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
    color: #fff;
    --f: .4em; /* control the folded part*/
    --r: .8em; /* control the ribbon shape */

    position: absolute;
    left: 20px;
    top: calc(-1*var(--f));
    padding: .2em;
    /*background: linear-gradient(90deg, #4070d5 0%, #2C692C 100%);
    background: linear-gradient(90deg, #D5C540 0%, #B6A111 100%);*/
    background: #2C692C;
    border-right: var(--f) solid #0005;
    border-bottom: var(--r) solid #0000;
    clip-path: polygon(calc(100% - var(--f)) 0,0 0,0 100%,calc(50% - var(--f)/2) calc(100% - var(--r)),calc(100% - var(--f)) 100%,calc(100% - var(--f)) var(--f),100% var(--f));
}