.bumper {
  background: var(--color-blurple);
  box-shadow:
    0 0 1.2em 0.6em rgba(var(--rgb-salmon), 0.1),
    0 0 1.5em 0.9em rgba(var(--rgb-salmon), 0.1),
    0 0 1.8em 1.2em rgba(var(--rgb-salmon), 0.1)
  ;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.bumper__container {
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--space-xxx-large) - 10px);
  padding-top: calc(var(--space-xxx-large) - 10px);
  position: relative;
}

.bumper__container:before {
  background: url(/assets/images/home/calendar.png) center center / cover no-repeat;
  content: '';
  height: 100%;
  -webkit-mask-image: linear-gradient(
    transparent,
    var(--color-black),
    transparent
  );
  mask-image: linear-gradient(
    transparent,
    var(--color-black),
    transparent
  );
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.bumper__content {
  align-items: center;
  display: flex;
  flex-direction: column;
  margin-inline: auto;
  gap: var(--space-neutral);
  width: min(100%, 48em);
}

.bumper:before,
.bumper:after {
  background-position: center center;
  background-repeat: repeat-x;
  background-size: 30px 10px;
  content: '';
  height: 10px;
  position: absolute;
  left: 0;
  width: 100%;
}

.bumper:before {
  background-image: url(/assets/images/bumper/bumper-top.svg);
  bottom: 100%;
}

.bumper:after {
  background-image: url(/assets/images/bumper/bumper-bottom.svg);
  top: 100%;
}