<div class="container">
  <div class="products">
    <svg class="products__bg">
      <defs>
        <radialGradient id="grad" cx="0.2" cy="0.8" r="1">
          <stop offset="0%" stop-color="#394a7b" stop-opacity="0.9" />
          <stop offset="100%" stop-color="#1a243f" stop-opacity="0.8" />
        </radialGradient>

        <mask id="mask">
          <rect width="100%" height="100%" fill="#fff" />
          <svg viewBox="0 0 1278 122" preserveAspectRatio="xMidYMin meet">
            <path d="M-2-2V122H0v-2C0,63.43,0,35.15,17.57,17.57S63.43,0,120,0H1158c56.57,0,84.85,0,102.43,17.57S1278,63.43,1278,120v2h2V-2Z" fill="#000" />
          </svg>
          <svg viewBox="0 0 1278 122" preserveAspectRatio="xMidYMax meet">
            <path d="M1280,124V0h-2V2c0,56.57,0,84.85-17.57,102.43S1214.57,122,1158,122H120c-56.57,0-84.85,0-102.43-17.57S0,58.57,0,2V0H-2V124Z" fill="#000" />
          </svg>
        </mask>
      </defs>

      <rect width="100%" height="100%" fill="url(#grad)" mask="url(#mask)" />
    </svg>

    <div class="products__item">item-1</div>
    <div class="products__item">item-2</div>
    <div class="products__item">item-3</div>
    <div class="products__item">item-4</div>
    <div class="products__item">item-5</div>
    <div class="products__item">item-6</div>
  </div>
</div>

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: radial-gradient(circle at 20% 50%, #28314d, #0c1733);
  padding-top: 100px;
  font-family: sans-serif;
  overflow-x: hidden;
}

.container {
  max-width: 768px;
  margin: 0 auto;
  padding: 0 15px;
}

.products {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 200px;
  gap: 20px;
  z-index: 0;
}

.products__bg {
  position: absolute;
  top: -75px;
  left: -75px;
  width: calc(100% + 150px);
  height: calc(100% + 150px);
  filter: drop-shadow(0px 0px 30px rgba(0, 0, 0, 0.1));
  z-index: -1;
}

@media(max-width: 912px) {
  .container {
    max-width: calc(100% - 120px);
  }
  
  .products {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .products__bg {
    top: -50px;
    left: -50px;
    width: calc(100% + 100px);
    height: calc(100% + 100px);
  }
}

@media(max-width: 576px) {
  .container {
    max-width: calc(100% - 20px);
  }
  
  .products {
    grid-template-columns: repeat(1, 1fr);
  }
  
  .products__bg {
    top: -15px;
    left: -15px;
    width: calc(100% + 30px);
    height: calc(100% + 30px);
  }
}

.products__item {
  position: relative;
  display: grid;
  color: #fff;
  place-content: center;
  z-index: 0;
}

.products__item::before,
.products__item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.products__item::before {
  background-color: rgba(70, 83, 121, 0.4);
  border-radius: 25px;
  z-index: -2;
}

.products__item::after {
  border: 1px solid #fff;
  border-radius: 25px;
  -webkit-mask: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.0) 50%);
  mask: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.0) 50%);
/*   background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3CradialGradient id='g' cx='0' cy='0' r='0.5'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.25' /%3E%3Cstop offset='100%25' stop-color='%23fff' stop-opacity='0' /%3E%3C/radialGradient%3E%3C/defs%3E%3Crect x='1' y='1' width='100%25' height='100%25' fill='none' stroke='url(%23g)' rx='25' stroke-width='1' /%3E%3C/svg%3E") no-repeat; */
  z-index: -1;
}