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;
}