/* THE DESKTOP SETTINGS */
/* Above the 700px */

@media (min-width: 43.75em) {
  /* For the pixel perfect solution */
  main {
    transform: translateY(-0.3906rem);
  }

  .section-four-card {
    max-width: 90rem;
    padding: 5rem 10.3125rem;

    /* The Flexbox */
    gap: 4rem;
  }

  /* The Content Area */
  .section-four-card__content-area {
    max-width: 33.75rem;
  }

  .section-four-card__title {
    font-size: 2.25rem;
    line-height: 3.375rem;
    letter-spacing: 0.0156rem;

    /* padding: 0 48px; */
    padding: 0 2.9375rem;
    margin-bottom: 0;

    transform: translate(0.0625rem, 0.375rem);
  }

  .section-four-card__strong {
    font-size: 2.25rem;
    line-height: 3.375rem;
    letter-spacing: 0.0156rem;

    /* padding: 0 49px 0 50px; */
    padding: 0 2.9375rem;
    margin-bottom: 1rem;

    transform: translate(0.1875rem, 0.1875rem);
  }

  /* The Card Area */

  .card-area {
    /* The CSS Grid */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-template-areas:
      "green red blue"
      "green yellow blue";

    gap: 1.875rem;
  }

  .card-item {
    padding: 1.75rem 2rem 2rem 2rem;
    min-width: 10rem;
  }

  .card-item__title {
    margin-bottom: 0.375rem;
  }

  .card-item__description {
    margin-left: 0;
    margin-bottom: 2.5rem;
  }

  .card-item__icon {
    width: 4rem;
    height: 4rem;
  }

  /* To change the color of the line */

  .card-item::before {
    /* The background-color was added
    this way to protect the height value of the card-item */
    content: "";
    width: calc(2rem + 100% + 2rem);
    height: 0.25rem;
    transform: translateX(-2rem) translateY(calc(-2rem + 0.25rem));
  }

  /* The CSS Grid Area */
  .card-item--green {
    grid-area: green;
    align-self: center;
  }

  .card-item--red {
    grid-area: red;
  }

  .card-item--yellow {
    grid-area: yellow;
  }

  .card-item--blue {
    grid-area: blue;
    align-self: center;
  }
}