/*
 * @file
 * Provides default layout styles for all layout sections.
 */

.layout {
  display: grid;
  grid-gap: var(--size-8);
  gap: var(--size-8);
  grid-auto-flow: row;
}

.layout__region {
  min-width: 0;
  width: 100%;
}

/* One Column */

.layout--onecol {
  grid-template-columns: 1fr;
}

.layout--onecol .layout--onecol {
  margin-inline: var(--size-4);
}

@media (min-width: 768px) {
  .layout--onecol .layout--onecol {
    margin-inline: auto;
    max-inline-size: calc(var(--size-tablet) - var(--size-4) * 2);
  }
}

@media (--tablet) {
  .layout--onecol .layout--onecol {
    margin-inline: auto;
    max-inline-size: calc(var(--size-tablet) - var(--size-4) * 2);
  }
}

@media (min-width: 1024px) {
  .layout--onecol .layout--onecol {
    max-inline-size: calc(var(--size-laptop) - var(--size-4) * 2);
  }
}

@media (--laptop) {
  .layout--onecol .layout--onecol {
    max-inline-size: calc(var(--size-laptop) - var(--size-4) * 2);
  }
}

@media (min-width: 1280px) {
  .layout--onecol .layout--onecol {
    max-inline-size: calc(var(--size-container) - var(--size-8) * 2);
  }
}

@media (--desktop) {
  .layout--onecol .layout--onecol {
    max-inline-size: calc(var(--size-container) - var(--size-8) * 2);
  }
}

/* Two Column */

@media (min-width: 768px) {
  .layout--twocol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (--tablet) {
  .layout--twocol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.layout--onecol .layout--twocol {
  margin-inline: var(--size-4);
}

@media (min-width: 768px) {
  .layout--onecol .layout--twocol {
    margin-inline: auto;
    max-inline-size: calc(var(--size-tablet) - var(--size-4) * 2);
  }
}

@media (--tablet) {
  .layout--onecol .layout--twocol {
    margin-inline: auto;
    max-inline-size: calc(var(--size-tablet) - var(--size-4) * 2);
  }
}

@media (min-width: 1024px) {
  .layout--onecol .layout--twocol {
    max-inline-size: calc(var(--size-laptop) - var(--size-4) * 2);
  }
}

@media (--laptop) {
  .layout--onecol .layout--twocol {
    max-inline-size: calc(var(--size-laptop) - var(--size-4) * 2);
  }
}

@media (min-width: 1280px) {
  .layout--onecol .layout--twocol {
    max-inline-size: calc(var(--size-container) - var(--size-8) * 2);
  }
}

@media (--desktop) {
  .layout--onecol .layout--twocol {
    max-inline-size: calc(var(--size-container) - var(--size-8) * 2);
  }
}

@media (min-width: 768px) {
  .layout--twocol-30-70 {
    grid-template-columns: 3fr 7fr;
  }
}

@media (--tablet) {
  .layout--twocol-30-70 {
    grid-template-columns: 3fr 7fr;
  }
}

.layout--onecol .layout--twocol-30-70 {
  margin-inline: var(--size-4);
}

@media (min-width: 768px) {
  .layout--onecol .layout--twocol-30-70 {
    margin-inline: auto;
    max-inline-size: calc(var(--size-tablet) - var(--size-4) * 2);
  }
}

@media (--tablet) {
  .layout--onecol .layout--twocol-30-70 {
    margin-inline: auto;
    max-inline-size: calc(var(--size-tablet) - var(--size-4) * 2);
  }
}

@media (min-width: 1024px) {
  .layout--onecol .layout--twocol-30-70 {
    max-inline-size: calc(var(--size-laptop) - var(--size-4) * 2);
  }
}

@media (--laptop) {
  .layout--onecol .layout--twocol-30-70 {
    max-inline-size: calc(var(--size-laptop) - var(--size-4) * 2);
  }
}

@media (min-width: 1280px) {
  .layout--onecol .layout--twocol-30-70 {
    max-inline-size: calc(var(--size-container) - var(--size-8) * 2);
  }
}

@media (--desktop) {
  .layout--onecol .layout--twocol-30-70 {
    max-inline-size: calc(var(--size-container) - var(--size-8) * 2);
  }
}

@media (min-width: 768px) {
  .layout--twocol-70-30 {
    grid-template-columns: 7fr 3fr;
  }
}

@media (--tablet) {
  .layout--twocol-70-30 {
    grid-template-columns: 7fr 3fr;
  }
}

.layout--onecol .layout--twocol-70-30 {
  margin-inline: var(--size-4);
}

@media (min-width: 768px) {
  .layout--onecol .layout--twocol-70-30 {
    margin-inline: auto;
    max-inline-size: calc(var(--size-tablet) - var(--size-4) * 2);
  }
}

@media (--tablet) {
  .layout--onecol .layout--twocol-70-30 {
    margin-inline: auto;
    max-inline-size: calc(var(--size-tablet) - var(--size-4) * 2);
  }
}

@media (min-width: 1024px) {
  .layout--onecol .layout--twocol-70-30 {
    max-inline-size: calc(var(--size-laptop) - var(--size-4) * 2);
  }
}

@media (--laptop) {
  .layout--onecol .layout--twocol-70-30 {
    max-inline-size: calc(var(--size-laptop) - var(--size-4) * 2);
  }
}

@media (min-width: 1280px) {
  .layout--onecol .layout--twocol-70-30 {
    max-inline-size: calc(var(--size-container) - var(--size-8) * 2);
  }
}

@media (--desktop) {
  .layout--onecol .layout--twocol-70-30 {
    max-inline-size: calc(var(--size-container) - var(--size-8) * 2);
  }
}

/* Three Column */

@media (min-width: 768px) {
  .layout--threecol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (--tablet) {
  .layout--threecol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.layout--onecol .layout--threecol {
  margin-inline: var(--size-4);
}

@media (min-width: 768px) {
  .layout--onecol .layout--threecol {
    margin-inline: auto;
    max-inline-size: calc(var(--size-tablet) - var(--size-4) * 2);
  }
}

@media (--tablet) {
  .layout--onecol .layout--threecol {
    margin-inline: auto;
    max-inline-size: calc(var(--size-tablet) - var(--size-4) * 2);
  }
}

@media (min-width: 1024px) {
  .layout--onecol .layout--threecol {
    max-inline-size: calc(var(--size-laptop) - var(--size-4) * 2);
  }
}

@media (--laptop) {
  .layout--onecol .layout--threecol {
    max-inline-size: calc(var(--size-laptop) - var(--size-4) * 2);
  }
}

@media (min-width: 1280px) {
  .layout--onecol .layout--threecol {
    max-inline-size: calc(var(--size-container) - var(--size-8) * 2);
  }
}

@media (--desktop) {
  .layout--onecol .layout--threecol {
    max-inline-size: calc(var(--size-container) - var(--size-8) * 2);
  }
}

@media (min-width: 768px) {
  .layout--threecol-25-25-50 {
    grid-template-columns: 2.5fr 2.5fr 5fr;
  }
}

@media (--tablet) {
  .layout--threecol-25-25-50 {
    grid-template-columns: 2.5fr 2.5fr 5fr;
  }
}

.layout--onecol .layout--threecol-25-25-50 {
  margin-inline: var(--size-4);
}

@media (min-width: 768px) {
  .layout--onecol .layout--threecol-25-25-50 {
    margin-inline: auto;
    max-inline-size: calc(var(--size-tablet) - var(--size-4) * 2);
  }
}

@media (--tablet) {
  .layout--onecol .layout--threecol-25-25-50 {
    margin-inline: auto;
    max-inline-size: calc(var(--size-tablet) - var(--size-4) * 2);
  }
}

@media (min-width: 1024px) {
  .layout--onecol .layout--threecol-25-25-50 {
    max-inline-size: calc(var(--size-laptop) - var(--size-4) * 2);
  }
}

@media (--laptop) {
  .layout--onecol .layout--threecol-25-25-50 {
    max-inline-size: calc(var(--size-laptop) - var(--size-4) * 2);
  }
}

@media (min-width: 1280px) {
  .layout--onecol .layout--threecol-25-25-50 {
    max-inline-size: calc(var(--size-container) - var(--size-8) * 2);
  }
}

@media (--desktop) {
  .layout--onecol .layout--threecol-25-25-50 {
    max-inline-size: calc(var(--size-container) - var(--size-8) * 2);
  }
}

@media (min-width: 768px) {
  .layout--threecol-25-50-25 {
    grid-template-columns: 2.5fr 5fr 2.5fr;
  }
}

@media (--tablet) {
  .layout--threecol-25-50-25 {
    grid-template-columns: 2.5fr 5fr 2.5fr;
  }
}

.layout--onecol .layout--threecol-25-50-25 {
  margin-inline: var(--size-4);
}

@media (min-width: 768px) {
  .layout--onecol .layout--threecol-25-50-25 {
    margin-inline: auto;
    max-inline-size: calc(var(--size-tablet) - var(--size-4) * 2);
  }
}

@media (--tablet) {
  .layout--onecol .layout--threecol-25-50-25 {
    margin-inline: auto;
    max-inline-size: calc(var(--size-tablet) - var(--size-4) * 2);
  }
}

@media (min-width: 1024px) {
  .layout--onecol .layout--threecol-25-50-25 {
    max-inline-size: calc(var(--size-laptop) - var(--size-4) * 2);
  }
}

@media (--laptop) {
  .layout--onecol .layout--threecol-25-50-25 {
    max-inline-size: calc(var(--size-laptop) - var(--size-4) * 2);
  }
}

@media (min-width: 1280px) {
  .layout--onecol .layout--threecol-25-50-25 {
    max-inline-size: calc(var(--size-container) - var(--size-8) * 2);
  }
}

@media (--desktop) {
  .layout--onecol .layout--threecol-25-50-25 {
    max-inline-size: calc(var(--size-container) - var(--size-8) * 2);
  }
}

@media (min-width: 768px) {
  .layout--threecol-50-25-25 {
    grid-template-columns: 5fr 2.5fr 2.5fr;
  }
}

@media (--tablet) {
  .layout--threecol-50-25-25 {
    grid-template-columns: 5fr 2.5fr 2.5fr;
  }
}

.layout--onecol .layout--threecol-50-25-25 {
  margin-inline: var(--size-4);
}

@media (min-width: 768px) {
  .layout--onecol .layout--threecol-50-25-25 {
    margin-inline: auto;
    max-inline-size: calc(var(--size-tablet) - var(--size-4) * 2);
  }
}

@media (--tablet) {
  .layout--onecol .layout--threecol-50-25-25 {
    margin-inline: auto;
    max-inline-size: calc(var(--size-tablet) - var(--size-4) * 2);
  }
}

@media (min-width: 1024px) {
  .layout--onecol .layout--threecol-50-25-25 {
    max-inline-size: calc(var(--size-laptop) - var(--size-4) * 2);
  }
}

@media (--laptop) {
  .layout--onecol .layout--threecol-50-25-25 {
    max-inline-size: calc(var(--size-laptop) - var(--size-4) * 2);
  }
}

@media (min-width: 1280px) {
  .layout--onecol .layout--threecol-50-25-25 {
    max-inline-size: calc(var(--size-container) - var(--size-8) * 2);
  }
}

@media (--desktop) {
  .layout--onecol .layout--threecol-50-25-25 {
    max-inline-size: calc(var(--size-container) - var(--size-8) * 2);
  }
}

/* Four Column */

@media (min-width: 640px) {
  .layout--fourcol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (--mobile) {
  .layout--fourcol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  .layout--fourcol {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (--tablet) {
  .layout--fourcol {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.layout--onecol .layout--fourcol {
  margin-inline: var(--size-4);
}

@media (min-width: 768px) {
  .layout--onecol .layout--fourcol {
    margin-inline: auto;
    max-inline-size: calc(var(--size-tablet) - var(--size-4) * 2);
  }
}

@media (--tablet) {
  .layout--onecol .layout--fourcol {
    margin-inline: auto;
    max-inline-size: calc(var(--size-tablet) - var(--size-4) * 2);
  }
}

@media (min-width: 1024px) {
  .layout--onecol .layout--fourcol {
    max-inline-size: calc(var(--size-laptop) - var(--size-4) * 2);
  }
}

@media (--laptop) {
  .layout--onecol .layout--fourcol {
    max-inline-size: calc(var(--size-laptop) - var(--size-4) * 2);
  }
}

@media (min-width: 1280px) {
  .layout--onecol .layout--fourcol {
    max-inline-size: calc(var(--size-container) - var(--size-8) * 2);
  }
}

@media (--desktop) {
  .layout--onecol .layout--fourcol {
    max-inline-size: calc(var(--size-container) - var(--size-8) * 2);
  }
}

/* Six Column */

@media (min-width: 768px) {
  .layout--sixcol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (--tablet) {
  .layout--sixcol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .layout--sixcol {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (--laptop) {
  .layout--sixcol {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.layout--onecol .layout--sixcol {
  margin-inline: var(--size-4);
}

@media (min-width: 768px) {
  .layout--onecol .layout--sixcol {
    margin-inline: auto;
    max-inline-size: calc(var(--size-tablet) - var(--size-4) * 2);
  }
}

@media (--tablet) {
  .layout--onecol .layout--sixcol {
    margin-inline: auto;
    max-inline-size: calc(var(--size-tablet) - var(--size-4) * 2);
  }
}

@media (min-width: 1024px) {
  .layout--onecol .layout--sixcol {
    max-inline-size: calc(var(--size-laptop) - var(--size-4) * 2);
  }
}

@media (--laptop) {
  .layout--onecol .layout--sixcol {
    max-inline-size: calc(var(--size-laptop) - var(--size-4) * 2);
  }
}

@media (min-width: 1280px) {
  .layout--onecol .layout--sixcol {
    max-inline-size: calc(var(--size-container) - var(--size-8) * 2);
  }
}

@media (--desktop) {
  .layout--onecol .layout--sixcol {
    max-inline-size: calc(var(--size-container) - var(--size-8) * 2);
  }
}

/* Styles for background color options within the layout selection screen. */

[data-drupal-selector="edit-layout-paragraphs-config-layout-background"]
  .form-type--boolean {
  display: flex;
  flex-direction: column;
}

/* Each color option is a radio button. */

[data-drupal-selector="edit-layout-paragraphs-config-layout-background"]
  input[type="radio"] {
  border-radius: var(--size-1) !important;
  height: var(--size-20) !important;
  width: var(--size-20) !important;
}

/* Santa Barbara Sand color option. */

[data-drupal-selector="edit-layout-paragraphs-config-layout-background"]
  input[type="radio"][value="bg-santa-barbara-sand"] {
  background-color: var(--santa-barbara-sand) !important;
}

/* Venice Canal color option. */

[data-drupal-selector="edit-layout-paragraphs-config-layout-background"]
  input[type="radio"][value="bg-venice-canal"] {
  background-color: var(--venice-canal) !important;
}