.block-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  justify-content: space-between;
  margin-bottom: 56px;
  font-family: DM Sans;
}

.block {
  position: relative;
  border-radius: 12px;
  padding: 32px;
  border: solid 1px;
  overflow: hidden;
  height: 412px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  background: linear-gradient(255.62deg, rgba(255, 255, 255, 1) 7%, #250D2D 228.9%), url('/site/assets/images/only_icon.png');
  background-size: cover, contain;
  background-position: center, center;
  background-blend-mode: overlay;
  background-repeat: no-repeat, no-repeat;
}

.block-highlight-color1 {
  background-image: linear-gradient(255.62deg, rgba(37, 13, 70, 0.8) 5.53%, #250D46 90.9%), url('/site/assets/images/only_icon.png');  
}

.block-highlight-color2 {
  background-image: linear-gradient(252.65deg, #E5052C 8.18%, #250E45 91.82%), url('/site/assets/images/only_icon.png');  
}

/* Layout 2x2 */
.block-grid.layout-2x2 .block-normal {
  width: calc(62.5% - 16px);
  /* 2/3 */
}

.block-grid.layout-2x2 .block-highlight-color1,
.block-grid.layout-2x2 .block-highlight-color2 {
  width: calc(37.5% - 16px);
  /* 1/3 */
}

/* Layout 2x3 */
.block-grid.layout-2x3 .block-normal {
  width: calc((100% - 64px) / 3.25);
}

.block-grid.layout-2x3 .block-highlight-color1,
.block-grid.layout-2x3 .block-highlight-color2 {
  width: calc(((100% - 64px) / 3.25) * 1.25);
}

.block-icon {
  width: 64px;
  height: 64px;
  z-index: 2;
}

.block-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.block-content {
  z-index: 2;
}


/* Title */
.block-content-title {
  font-weight: 600;
  font-size: 24px;
  line-height: 32px;
  vertical-align: middle;
  color: rgba(75, 85, 99, 1);
  margin-bottom: 16px;
  z-index: 2;
}

/* Subtitle */
.block-content-subtitle {
  font-family: Inter;
  font-weight: 500;
  font-size: 18px;
  line-height: 28px;
  color: rgba(75, 85, 99, 1);
  z-index: 2;
}

.block-highlight-color1 .block-content .block-content-title,
.block-highlight-color2 .block-content .block-content-title {
  color: rgba(255, 255, 255, 1) !important;
}

.block-highlight-color1 .block-content .block-content-subtitle,
.block-highlight-color2 .block-content .block-content-subtitle {
  color: rgba(255, 255, 255, 1) !important;
}

/* Responsive (Mobile < 768px) */
@media (max-width: 768px) {
  .block {
    width: 100% !important;
    height: auto !important;
    min-height: unset;
    padding: 20px !important;
  }

  .block-grid-2x3 {
    flex-direction: column;
    gap: 24px;
  }

  .block-content {
    padding: 16px 0;
  }

  .block-content-title {
    font-size: 20px;
    line-height: 28px;
  }

  .block-content-subtitle {
    font-size: 14px;
    line-height: 22px;
  }
}