.layout--bg-graphic {
  padding: 60px 0;
  background-color: var(--color-gray-100);
  background-image: url(../../images/bg-symbol.svg);
  background-repeat: no-repeat;
  background-position: 10% 50%;
  background-size: 800px;

  @media screen and (min-width: 768px) {
    padding: 120px 0;
  }
}

.layout--bg-light-grey {
  background-color: var(--color-gray-100);
}

.layout--bg-orange-image {
  min-height: 800px;
  background-color: var(--color-gray-100);
  background-image: url(../../images/bg-women-w-laptop.jpg);
  background-repeat: no-repeat;
  background-position: 0% 50%;
  background-size: 720px;
}

.layout--vertical-padding-large {
  padding-top: 60px;
  padding-bottom: 60px;

  @media screen and (min-width: 769px) {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}

.block--vertical-padding-large {
  padding-top: 60px;
  padding-bottom: 60px;

  @media screen and (min-width: 769px) {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}

/* Two column grid layout */
.first-column-grid .layout__region--first {
  @media screen and (min-width: 768px) {
    display: grid;
    grid-template-columns: repeat(2, minmax(200px, 1fr));
    gap: 16px;
  }
  @media screen and (min-width: 900px) {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 32px;
  }
}