/*
  Defines a box with a gradient border at the bottom.
  It's composed of an outer box (.text-box-red) and an inner box (.content).
  The outer box has a gradient background and padding.
  The inner box has a solid background color and is placed inside the outer box.
  This creates the illusion of a gradient border.
*/
.text-box-red {
  background: linear-gradient(
          to bottom,
          #ffffff 0%,
          #ffcccc 10%,
          #ff6666 50%,
          #CF0202 100%
  );
  padding: 3px; /* border width */
  border-radius: 16px;
  display: inline-block;
  height: 100%;
  box-sizing: border-box;
  position: relative; /* This is the key for positioning the vignette */
}

/*
  The inner box has a solid background that covers the outer box's gradient,
  leaving only the padding visible, which creates the border effect.
*/
.text-box-red .content {
  background: #fff;
  border-radius: 13px;
  padding: 0.5rem 2rem;
  height: 100%;
  box-sizing: border-box;
  color: #000; /* Set text color to black for contrast */
}

/* Base style for the vignette triangle */
.text-box-red::before {
  content: '';
  position: absolute; /* Position relative to the .text-box-red */
  top: 0;
  left: 0;width: 45px;
  height: 55px;
  flex-shrink: 0;
  background-image: url('../img/vignettes/red_triangle_vignette.svg'); /* Use the base SVG */
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1;
}

/* Base style for the vignette number */
.text-box-red::after {
  content: ''; /* Default content is empty */
  position: absolute; /* Position relative to the .text-box-red */
  top: 10px;
  left: 10px;
  color: white;
  font-size: 18px;
  font-weight: bold;
  z-index: 2;
}

.card-grid-red {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
  padding: 20px;
  margin-top: 2rem;
  justify-content: center;
}

/* Add the specific number for each child in the grid */
.card-grid-red .text-box-red:nth-child(1)::after {
  content: '1';
}

.card-grid-red .text-box-red:nth-child(2)::after {
  content: '2';
}

.card-grid-red .text-box-red:nth-child(3)::after {
  content: '3';
}

.card-grid-red .text-box-red:nth-child(4)::after {
  content: '4';
}

.text-box-red b {
  color: #000;
  font-size: 24px;
  font-style: italic;
  font-weight: 700;
  line-height: 35px;
}

.text-box-red p {
  color: #000;
  font-size: 24px;
  font-style: italic;
  font-weight: 500;
  line-height: 35px;
}