.banner {
  width: 500px; /* Set width of the banner to 100% of viewport width */
  height: 150px;
  background: linear-gradient(to right, white, rgb(245, 245, 245), rgb(227, 227, 227)); /* Gradient from white to gray */
  padding: 10px; /* Adjust padding as needed */
  position: relative; /* Needed for absolute positioning */
  overflow: hidden; /* Hide the overflowing skewed content */
  transform: skewX(-20deg); /* Skew the banner to create a triangular side */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition for smooth transformation and box-shadow */
  cursor: pointer; /* Change cursor to pointer on hover */
}

.banner:hover {
  transform: skewX(-20deg) scale(1.05); /* Increase scale on hover to make it pop */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); /* Add box-shadow on hover for depth effect */
}

.underlined-header {
  font-family: 'Golos Text';
  display: inline-block; /* Ensure the width is based on content */
  border-bottom: 1.5px solid #999696; /* Adjust the color and thickness as needed */
  width: 165px; /* Adjust the width as needed, for example, 50% of the header's width */
}

.content {
  transform: skewX(20deg); /* Counter-skew the content to maintain its appearance */
}

.banner .content {
  display: flex;
  align-items: center;
}

.banner::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 1%; /* Width of the red strip */
  background-color: red; /* Red color */
}