.bg-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 320px;
  height: 40vh;
  background:
    linear-gradient(120deg, rgba(24, 79, 82, 0.96), rgba(38, 140, 141, 0.88)),
    #184f52;
  border-bottom: 4px solid #fbb336;
}

.bg-container .content {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  min-height: inherit;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  color: #ffffff;
  text-align: center;
}

.bg-container::before,
.bg-container::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bg-container::before {
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: 0.38;
}

.bg-container::after {
  z-index: 1;
  background:
    linear-gradient(
        90deg,
        transparent calc(50% - 126px),
        rgba(251, 179, 54, 0.24) calc(50% - 126px) calc(50% - 124px),
        transparent calc(50% - 124px) calc(50% + 124px),
        rgba(251, 179, 54, 0.24) calc(50% + 124px) calc(50% + 126px),
        transparent calc(50% + 126px)
    ),
    linear-gradient(
        0deg,
        transparent calc(50% - 72px),
        rgba(251, 179, 54, 0.18) calc(50% - 72px) calc(50% - 70px),
        transparent calc(50% - 70px) calc(50% + 70px),
        rgba(251, 179, 54, 0.18) calc(50% + 70px) calc(50% + 72px),
        transparent calc(50% + 72px)
    );
  opacity: 0.8;
}

@media only screen and (max-width: 767px) {
  .bg-container {
    min-height: 260px;
    height: auto;
  }

  .bg-container .content {
    padding: 28px 16px;
  }
}