.layout {
  padding-top: var(--spacing-xlarge);
  padding-bottom: var(--spacing-xlarge);
}

.layout--bg-1.layout--bg-1 {
  background-color: var(--color-secondary-b);
}

.layout--bg-1 .view--cards {
  background-color: var(--color-secondary-b);
}

.layout--bg-2.layout--bg-2 {
  color: var(--color-white);
  background-color: var(--color-primary-b);
}

.layout--bg-2 .view--cards {
  background-color: var(--color-primary-b);
}

.layout--bg-3.layout--bg-3 {
  color: var(--color-white);
  background-color: var(--color-primary-a);
}

.layout--bg-3 .view--cards {
  background-color: var(--color-primary-a);
}

.layout--bg-4.layout--bg-4 {
  background-color: var(--color-grey-light-a);
}

.layout--bg-4 .view--cards {
  background-color: var(--color-grey-light-a);
}

.layout--bg-5.layout--bg-5 {
  background-color: var(--color-white);
}

.layout--bg-5 .view--cards {
  background-color: var(--color-white);
}

.layout--bg-5 .view--cards .card {
  box-shadow: var(--box-shadow);
}

:where(.layout:not(.layout--one-column, .layout-tiles)) .layout__region > * + * {
  margin-top: var(--spacing);
}

#main-content .layout--bg-2 .block-inline-blockblock-text a,
#main-content .layout--bg-3 .block-inline-blockblock-text a {
  color: var(--color-white);
}
#main-content .layout--bg-1 .block-inline-blockblock-text a,
#main-content .layout--bg-2 .views-exposed-form label,
#main-content .layout--bg-3 .views-exposed-form label {
  color: var(--color-black);
}

.layout.reduce-padding-top {
  padding-top: 0;
}

.layout.reduce-padding-bottom {
  padding-bottom: 0;
}

.layout:not(.layout-tiles) .layout__region > div:not(:last-child) {
  padding-bottom: var(--spacing-xlarge);
}