:root {
  --section-4-bg-color: #333;
  --section-4-item-color: white;
  --section-4-box-color: #4d4d4d;
  --section-4-link-color: rgb(86, 95, 195);
}

.section-4 {
  font-size: calc(var(--overall-size) * 0.5);
  background-color: var(--section-4-bg-color);
  padding-bottom: 5rem;
  align-content: center;
}
.section-4-content {
  margin: 0 auto; /* Centers the grid on the page */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3vw;
}


.section-4-content div {
  padding: calc(var(--overall-size) * 0.5);
  box-sizing: border-box;
  background-color: var(--section-4-item-color);
  min-width: 32%;
}

.section-4 .colored-box {
  background-color: var(--section-4-box-color);
  width: 100%; /* Ensures the box fills its grid cell */
  height: calc(var(--overall-size) * 6); /* Increases the height of the boxes */
  display: flex; /* Ensures the content inside the box is centered */
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 8px; /* Optional: Adds rounded corners for a modern look */
}
.section-4 a {
  text-decoration: none;
  font-weight: 700;
  color: white;
  padding: 5px;
  background-color: white;
}

/* @media screen and (max-width: 768px) {
  .section-4 {
    font-size: calc(var(--overall-size) * 1.5);
  }
} */