.experience-layouts-gridContent {
  padding-top: 3em;
  padding-bottom: 3em; }
  @media (min-width: 768px) {
    .experience-layouts-gridContent {
      padding-bottom: 0; } }
  @media (min-width: 1200px) {
    .experience-layouts-gridContent .container {
      padding-left: 20px;
      padding-right: 20px; } }

@media (min-width: 1200px) {
  .region-grid {
    margin-left: -20px;
    margin-right: -20px; } }

.region-grid > .experience-component {
  padding-left: 15px;
  padding-right: 15px;
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%; }
  @media (min-width: 1200px) {
    .region-grid > .experience-component {
      padding-left: 20px;
      padding-right: 20px; } }
  @media (min-width: 768px) {
    .region-grid > .experience-component.experience-assets-contentThreeQuartersDescription {
      padding-left: 0;
      padding-right: 0; } }
  @media (min-width: 768px) {
    .region-grid > .experience-component.experience-assets-contentThreeQuartersDescription + div {
      padding-left: 0;
      padding-right: 0; } }

.region-grid.grid-1 > .experience-component {
  -ms-flex: 0 0 100%;
  flex: 0 0 100%;
  max-width: 100%; }

@media (min-width: 768px) {
  .region-grid.grid-2 > .experience-component {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
    margin-bottom: 30px; } }

@media (min-width: 1200px) {
  .region-grid.grid-2 > .experience-component {
    margin-bottom: 40px; } }

@media (min-width: 768px) {
  .region-grid.grid-3 > .experience-component {
    -ms-flex: 0 0 33.33%;
    flex: 0 0 33.33%;
    max-width: 33.33%;
    margin-bottom: 30px; } }

@media (min-width: 1200px) {
  .region-grid.grid-3 > .experience-component {
    margin-bottom: 40px; } }

@media (min-width: 768px) {
  .region-grid.grid-4 > .experience-component {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
    margin-bottom: 30px; } }

@media (min-width: 1200px) {
  .region-grid.grid-4 > .experience-component {
    margin-bottom: 40px; } }