body {
	font-family: Arial, sans-serif;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	background: #f4f4f4;
}
.container {
	text-align: center;
}		
h1 {
	font-size: 4em;
	color: dodgerblue;
	margin-bottom: 0.3em;
}
h2 {
	font-size: 1.8em;
	margin-bottom: 0.3em;
}
p {
	font-size: 1.2em;
	margin-bottom: 1em;
}
.ribbon {
  font-size: 24px;
  font-weight: bold;
  color: #fff;
}
.ribbon {
  --f: .1em; /* control the folded part */
  
  position: absolute;
  top: 0;
  left: 0;
  line-height: 2.2;
  padding-inline: 1lh; 
  padding-bottom: var(--f);
  border-image: conic-gradient(#0008 0 0) 51%/var(--f);
  clip-path: polygon(
	100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)), 0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px));
  transform: translate(calc((cos(45deg) - 1)*100%), -100%) rotate(-45deg);
  transform-origin: 100% 100%;
  background-color: crimson; /* the main color  */
}		
.background-top {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%; /* Adjust as needed */
	height: 25%;
	background: url('images/pexels-marcelo-rodrigo-215593560-20240242.jpg') no-repeat top center;						
	background-size: auto;
	opacity: 0.3; /* Adjust the transparency */
	z-index: -1;
}		
.background-bottom {
	position: absolute;
	top: 25%;
	right: 0;
	width: 100%; /* Adjust as needed */
	height: calc(75% + 40px);
	background: url('images/pexels-marcelo-rodrigo-215593560-20240242.jpg') no-repeat top center;						
	background-size: cover;
	opacity: 0.3; /* Adjust the transparency */
	z-index: -1;
}				
.top {
	clip-path: polygon(0 0,100% 0,100% 100%,50% calc(100% - 50px),0 100%);
}
.bottom {
	clip-path: polygon(0 50px,50% 0,100% 50px,100% 100%,0 100%);
	margin-top: -40px;
}