.border {
  width: 80%;
  margin: var(--space-2) auto var(--space-2);
  border-bottom: 1px solid var(--color-primary-400);
}

#services {
  background-color: black;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
  gap: var(--space-4);
  justify-content: center;
  grid-template-areas:
    'header header '
    'right-middle left-middle'
    'left right';

  /* margin: var(--space-8) auto; */
  /* text-align: center;
          display: flex;
          justify-content: center; */
}

#item-5 {
  grid-area: header;
  /* grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: span 4; */
}

#item-5 p {
  /* color: #a68407;
  margin: auto;
  width: 70%;
  padding: 20px 0;
  text-align: justify; */
}

#item-1 {
  grid-area: left;
  /* grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: span 2; */
}

#item-2 {
  grid-area: left-middle;
  /* grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 3;
    grid-column-end: span 2; */
}

#item-3 {
  grid-area: right-middle;
  /* grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: span 2; */
}

#item-4 {
  grid-area: right;
  /* grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 3;
    grid-column-end: span 2; */
}

#services img {
  width: 100%;
  object-fit: cover;
}

.service-item {
  border-radius: var(--border-radius-medium);
  text-align: center;
  background-color: black;
  overflow: hidden;
  padding-bottom: var(--space-6);
  /* position: relative;  */
}

.service-item-content {
  padding-bottom: var(--space-4);
  margin-top: 1rem;
}

.service-item-content p {
  margin-bottom: var(--space-6);
}

/* .last-service-item {
      padding-bottom: var(--space-12);
    } */

.service-item-actions p {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.service-description {
  color: var(--color-primary-400);
  margin: 2rem 1rem 0 !important;
  /* font-weight: bold !important; */
}

@media (min-width: 48rem) {
  #services {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(5rem, 1fr));
    gap: var(--space-4);
    justify-content: center;
    grid-template-areas:
      'header header header header'
      'left left-middle right-middle right';

    /* margin: var(--space-8) auto;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
      gap: var(--space-2) var(--space-10); */
    /* text-align: center;
        display: flex;
        justify-content: center; */
  }

  #item-5 {
    grid-area: header;
    /* grid-row-start: 1;
      grid-row-end: 2;
      grid-column-start: 1;
      grid-column-end: span 4; */
  }

  #item-5 p {
    color: #a68407;
    margin: auto;
    width: 70%;
    /* padding: 20px 0; */
    text-align: justify;
  }

  #item-1 {
    grid-area: left;
    /* grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 2; */
  }

  #item-2 {
    grid-area: left-middle;
    /* grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3; */
  }

  #item-3 {
    grid-area: right-middle;
    /* grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 3;
    grid-column-end: 4; */
  }

  #item-4 {
    grid-area: right;
    /* grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 4;
    grid-column-end: 5; */
  }

  /* .service-item {
        width: 20rem;
      } */

  .service-item-actions p {
    margin-bottom: 0;
  }

  #services {
    padding-bottom: var(--space-2);
  }
}

@media (min-width: 100rem) {
  #services {
    grid-template-columns: repeat(4, minmax(10rem, 1fr));
  }
}