<div class="products">
    <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>

*,
*::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;
}

.products {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 200px;
  gap: 20px;
  max-width: 768px;
  margin: 0 auto;
  padding: 45px;
  border-radius: 20px;
  background: radial-gradient(
    500px 400px at left -50px bottom 160px,
    rgba(7, 176, 233, 0.7),
    rgba(255, 255, 255, 0.1)
  );
  z-index: 0;
}

.products__item {
  position: relative;
  display: grid;
  color: #fff;
  place-content: center;
  background-color: rgba(70, 83, 121, 0.4);
  border-radius: 25px;
  z-index: 0;
}

.products__item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  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) 50%
  );
  mask: radial-gradient(
    circle at 0 0,
    rgba(0, 0, 0, 0.2),
    rgba(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;
}