.two-columns-template {
  display: grid;
  grid-template-columns: minmax(0, var(--body-width)) minmax(0, 507px);
  gap: var(--5xl);
  justify-content: center;
  align-items: start;
}
@media screen and (width < 768px) {
  .two-columns-template {
    gap: var(--2xl);
    grid-template-columns: 1fr;
  }
}
@media screen and (width < 640px) {
  .two-columns-template {
    gap: unset;
  }
}
.two-columns-template.cols-50-50 {
  grid-template-columns: repeat(2, minmax(0, var(--body-width)));
  gap: var(--4xl);
  max-width: calc(1056px + var(--4xl));
  margin: auto;
}
@media screen and (width < 768px) {
  .two-columns-template.cols-50-50 {
    gap: var(--2xl);
    grid-template-columns: 1fr;
  }
}
.two-columns-template.cols-50-50 .two-columns-template--aside {
  padding-top: 0;
}
.two-columns-template.cols-25-75 {
  grid-template-columns: 356px 1fr;
  grid-template-areas: "aside content";
  gap: var(--4xl);
  margin: auto;
}
.two-columns-template.cols-25-75 .two-columns-template--aside {
  grid-area: aside;
}
.two-columns-template.cols-25-75 .two-columns-template--content {
  grid-area: content;
  gap: var(--md);
}
@media screen and (width < 1024px) {
  .two-columns-template.cols-25-75 {
    gap: var(--2xl);
    grid-template-columns: 1fr;
    grid-template-areas: "aside" "content";
  }
}
.two-columns-template.cols-25-75 .two-columns-template--aside {
  padding-top: 0;
}
.two-columns-template .two-columns-template--aside {
  padding-top: var(--4xl);
  container: card/inline-size;
}
@media screen and (width < 640px) {
  .two-columns-template .two-columns-template--aside {
    padding-top: 0;
  }
}
.two-columns-template .two-columns-template--content,
.two-columns-template .two-columns-template--aside {
  display: grid;
  gap: var(--md);
}
@media screen and (width < 640px) {
  .two-columns-template .two-columns-template--content {
    gap: unset;
  }
}