/*
These styles are meant to be a starting point and to be overridden in the site theme.
 */

.rad-two-column {
}

/* Split width columns. */
.rad-two-column--half_half .rad-columns__wrapper {
  display: grid;
  grid:
    "left" auto
    "right" auto / 1fr;

  .rad-two-column__left {
    grid-area: left;
  }

  .rad-two-column__right {
    grid-area: right;
  }
}

/* sidebar specific styles */
.rad-two-column--left_sidebar .rad-columns__wrapper,
.rad-two-column--right_sidebar .rad-columns__wrapper {
  display: grid;

  grid-template-areas:
    "content"
    "sidebar";

  grid-template-columns: minmax(0, 1fr);

  .rad-two-column--sidebar {
    grid-area: sidebar;
  }

  .rad-two-column--content {
    grid-area: content;
  }
}

@media (min-width: 768px) {
  .rad-two-column--half_half .rad-columns__wrapper {
    grid: "left right" auto / 1fr 1fr;
  }

  .rad-two-column--left_sidebar .rad-columns__wrapper {
    grid-template-areas: "sidebar content";
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
  }

  .rad-two-column--right_sidebar .rad-columns__wrapper {
    grid-template-areas: "content sidebar";
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  }
}

@media (min-width: 992px) {
  .rad-two-column--left_sidebar .rad-columns__wrapper {
    grid-template-areas: "sidebar content";
    grid-template-columns: minmax(0, 1fr) minmax(0, 4fr);
  }

  .rad-two-column--right_sidebar .rad-columns__wrapper {
    grid-template-areas: "content sidebar";
    grid-template-columns: minmax(0, 4fr) minmax(0, 1fr);
  }
}