container.pcss

.container--default {
  @apply max-w-screen-xl;
}

.container--narrow {
  margin: auto;
  width: 882px;
}

.container--medium {
  margin: auto;
  max-width: 1300px;
}

.container--wide {
  margin: auto;
  max-width: 1400px;
}

.section-clip {
  clip-path: polygon(0 1%, 100% 0%, 100% 99%, 0% 100%);
  margin-bottom: -3.2vw;

  @screen xl {
    clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);
    margin-bottom: -4.2vw;
  }
}

.header-max-width {
  max-width: 1340px !important;
}

.container {
  @apply: mx-auto;
  max-width: 1150px;
}

.grid-container {
  @apply grid mx-5;
  grid-template-columns: 1fr;
  grid-template-areas:
  "left-side"
  "content"
  "right-side";
  gap: 1rem;
  max-width: 1150px;
}
@responsive {
  .grid-container {
    @screen xl {
      grid-template-columns: 240px 1fr 102px;
      grid-template-areas:
      "left-side content right-side";
      margin-left: 10%;
    }
     @screen 3xl {
      margin-left: 20%;
    }
  }
}

.grid-content {
  grid-area: content;
}

.grid-left-side {
  grid-area: left-side;
}

.grid-right-side {
  grid-area: right-side;
}

.grid-content-with-right-side {
  grid-column-start: content;
  grid-column-end: right-side;
}

@responsive {
  /* Removes default container padding from the element. */
  /* @note: needs to be kept in sync with tailwind configuration */
  .container-padding--zero {
    margin-left: -1rem;
    margin-right: -1rem;

    @screen xl {
      margin-left: -2rem;
      margin-right: -2rem;
    }
  }

  .container-padding--auto {
    margin-left: 0;
    margin-right: 0;
  }
}