:root{
    --white:#fff;
    --background:#eee; 
    --color1:#e67e22;
    --color2:#d35400;
}

.ribbon{
    color: var(--white);
    background: var(--background);
    font-family: "Pridi", serif;
    text-align: center;
    padding: 60px 0;
    margin: 0 15px;
}

.ribbon h3{
    background: var(--color1);
    font-size: 22px;
    font-weight: 600;
    position: relative;
    padding: 15px 0;
    margin: 0 -15px
}

.ribbon h3:before,
.ribbon h3:after{
    content: "";
    background: linear-gradient(to top right,transparent 49%,var(--color2) 50%);
    width: 15px;
    height: 15px;
    position: absolute;
    bottom: -15px;
    left: 0;
}

.ribbon h3:after{
    left: auto;
    right: 0;
    bottom: auto;
    top: -15px;
    background: linear-gradient(to top right,var(--color2) 49%, transparent 50%);
}

.ribbon.pink{ --color1: #e056fd; }
.ribbon.pink h3:before,
.ribbon.pink h3:after{ --color2:#be2edd; }

.ribbon.yellow{ --color1:#f1c40f; }
.ribbon.yellow h3:before,
.ribbon.yellow h3:after{ --color2:#f39c12; }

.ribbon.purple{ --color1:#686de0; }
.ribbon.purple h3:before,
.ribbon.purple h3:after{ --color2:#4834d4; }

@media screen and (max-width:990px){ 
   .ribbon{ margin-bottom: 50px; } 
}