.grid-container {
  display: grid;
  grid-template-rows: 200px 200px;
  grid-template-columns: 200px 200px 200px 200px;
  gap: 20px;
}

.grid-item {
  color: var(--dark-blue-color);
}

.grid-item-icon-for-object-2x2 {
  position: absolute;
  margin: 20px;
  border: none;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  font-size: 50px;
  z-index: 2;
}

.grid-item-content-for-object-2x2 {
  display: flex;
  flex-direction: column;
  padding: 10px 20px;
}

.grid-item-content-for-object-2x1 {
  padding: 20px;
  display: flex;
  gap: 10px;
}

.grid-item-content-for-object-1x1 {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.grid-item-icon {
  width: 65px;
  height: 65px;
  border: 2px solid var(--dark-blue-color);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.grid-item-image-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 250px;
}

.grid-item-image-container img {
  position: absolute;
  object-fit: cover;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.grid-item-section-title {
  font-size: var(--main-line-font);
  font-weight: bold;
}

.grid-item-section-description {
  font-size: var(--content-font);
}

.grid-item-content-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.grid-item-icon i {
  font-size: 40px;
}

.object-1 {
  grid-row: 1/3;
  grid-column: 1/3;
}

.object-2 {
  grid-row: 1/2;
  grid-column: span 2;
}

.object-3 {
  grid-column: 3;
}

.object-4 {
  grid-column: 4;
}

@media (max-width: 1170px) and (min-width: 500px) {
  .grid-container {
    grid-template-columns: 200px 200px;
    grid-template-rows: 200px 200px 200px 200px;
  }

  .object-1 {
    grid-row: 1/3;
    grid-column: 1/3;
    font-size: var(--main-line-font);
  }

  .object-2 {
    grid-row: 3/3;
    grid-column: span 2;
  }

  .object-3 {
    grid-row: 4;
    grid-column: 1;
  }

  .object-4 {
    grid-row: 4;
    grid-column: 2;
  }
}

@media (max-width: 500px) {
  .grid-container {
    display: flex;
    flex-direction: column;
  }
}