.grid-container-workplace {
  display: flex;
  align-items: center;
  gap: var(--spacing-xxx-large);
  flex-direction: column;
  width: 100%;
}

.grid-container-workplace-reverse {
  display: flex;
  align-items: center;
  gap: var(--spacing-xxx-large);
  flex-direction: column-reverse;
  width: 100%;
}

.content-image-grid-text-section-workplace h4 {
  padding: var(--spacing-small) 0;
}

.content-image-grid-grid-section-workplace .img-3-workplace {
  width: 100%;
}

.content-image-grid-grid-section-workplace .grid-item-workplace .img-1-workplace,
.content-image-grid-grid-section-workplace .grid-item-workplace .img-2-workplace {
  display: none;
}

.shape-3-workplace, .shape-1-workplace{
  display:none;
}

@media screen and (min-width: 1000px) {
  .grid-container-workplace {
    display: flex;
    flex-direction: row;
    gap: var(--spacing-xx-large);
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    padding-top: 0 !important;
  }

  .grid-container-workplace-reverse {
    display: flex;
    flex-direction: row-reverse;
    gap: var(--spacing-xx-large);
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    padding-top: 0 !important;
  }

  .content-image-grid-text-section-workplace{
    display:flex;
    flex-direction:column;
    gap:var(--spacing-small)
  }

  .content-image-grid-text-section-workplace,
  .content-image-grid-grid-section-workplace {
    flex: 1;
    width: 50%;
    max-width: 50%;
    box-sizing: border-box;
  }

  .content-image-grid-grid-section-workplace {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    grid-template-rows: repeat(24, 1fr);
    width: 100%;
    max-width: 100vw; /
    aspect-ratio: 1 / 1;
  }

  .content-image-grid-grid-section-workplace .grid-item-workplace .img-1-workplace,
  .content-image-grid-grid-section-workplace .grid-item-workplace .img-2-workplace,
  .content-image-grid-grid-section-workplace .grid-item-workplace .img-3-workplace {
    display: block !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .shape-1-workplace,
  .shape-2-workplace {
    display: block !important;
  }

  .shape-1-workplace {
    grid-column: 21 / span 2;
    grid-row: 13 / span 2;
    z-index: 2;
  }


  .shape-3-workplace {
    grid-column: 10 / span 7;
    grid-row: 9 / span 4;
    z-index: 2;
  }

  .content-image-grid-grid-section-workplace .grid-item-workplace:nth-of-type(1) { 
    grid-column: 14 / span 8;
    grid-row: 12 / span 15;
    z-index:0;
  }

  .content-image-grid-grid-section-workplace .grid-item-workplace:nth-of-type(2) { 
    grid-column: 1 / span 12;
    grid-row: 6 / span 16;
    z-index:0;
  }

  .content-image-grid-grid-section-workplace .grid-item-workplace:nth-of-type(3) {
    grid-column: 14 / span 11;
    grid-row: 1 / span 10;
    z-index:0;
  }


  .content-image-grid-grid-section-workplace {
    overflow: hidden; 
    position: relative; 
  }

  .grid-item-workplace img {
    transition: transform 0.1s ease-out;
    will-change: transform;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .shape-1-workplace img {
    transition: transform 0.1s ease-out;
    will-change: transform;
    object-fit: cover;
  }
}