.section {
  margin-bottom: calc(var(--spacing) * 3);

  @media screen and (min-width: 992px) {
    margin-bottom: calc(var(--spacing) * 6);
  }

  .grid {
    display: grid;
    align-items: start;
    position: relative;
    row-gap: calc(var(--spacing) * 2.25);

    @media screen and (min-width: 768px) {
      column-gap: calc(var(--spacing) * 2.25);
    }

    > *,
    .component-block {
      margin-bottom: 0;
    }
  }

  /**
    * Layout
   */
  &.one-column-narrow .grid {
    grid-template-columns: 1fr minmax(0, 828px) 1fr;

    > * {
      grid-column-start: 2;
    }
  }

  &.two-columns .grid {
    @media screen and (min-width: 992px) {
      grid-template-columns: 1fr 1fr;
    }
  }

  &.three-columns .grid {
    @media screen and (min-width: 992px) {
      grid-template-columns: 1fr 1fr 1fr;
    }
  }

  &.four-columns .grid {
    @media screen and (min-width: 992px) {
      grid-template-columns: 1fr 1fr;
    }

    @media screen and (min-width: 1200px) {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  }

  /**
   * Colors
   */
  &.background-primary,
  &.background-secondary {
    border-radius: var(--border-radius-xxxl);
    position: relative;
    padding: calc(var(--spacing) * 2.5) calc(var(--spacing) * 3);

    @media screen and (min-width: 992px) {
      padding: calc(var(--spacing) * 5.25) 0;
      overflow: visible;

      &::before {
        content: '';
        border-radius: var(--border-radius-xxxl);
        inset: 0 calc(var(--spacing) * -5.625);
        width: calc(100% + (var(--spacing) * 11.25));
        height: 100%;
        position: absolute;
      }
    }

    h1, h2, h3, h4, h5, h6, .heading,
    a:not(.btn, .call-to-action) {
      color: currentColor;
    }

    /**
     * Component styling
     */
    .block-iwink-components {
      background: none;
      box-shadow: none;
      padding: 0;

      /* Call to action */
      .call-to-action {
        &.primary {
          background: var(--white);
          border-color: var(--white);
          color: var(--secondary-color);

          &:hover,
          &:focus {
            background: var(--secondary-color-dark);
            border-color: var(--white);
            color: var(--white);
          }
        }

        &.secondary {
          background: transparent;
          border-color: var(--white);
          color: var(--white);

          &:hover,
          &:focus {
            background: var(--white);
            color: var(--secondary-color);
          }
        }
      }

      /* Download list */
      &.block-downloads {
        .download-list {
          background: none;
          box-shadow: none;
          padding: 0;
        }

        .download-list-item span {
          color: var(--white);
        }
      }

      /* Link list */
      &.block-links a {
        color: var(--white) !important;

        &:hover,
        &:focus {
          color: var(--white) !important;

          .icon {
            background: var(--white) !important;

            svg * {
              fill: var(--primary-color-dark) !important;
            }
          }
        }

        .icon {
          border-color: var(--white) !important;

          svg * {
            fill: var(--white) !important;
          }
        }
      }

      /* Quote */
      &.block-quote {
        h2,
        .quote-wrapper {
          color: var(--white);
        }
      }

      /* Read more button */
      .read-more,
      .read-more.call-to-action {
        color: var(--white);
        text-decoration-color: var(--white);

        &:focus {
          border-color: var(--white);
        }
      }
    }
  }

  &.background-primary {
    background-color: var(--primary-color);

    &::before {
      background-color: var(--primary-color);
    }
  }

  &.background-secondary {
    background-color: var(--secondary-color);
    color: var(--white);

    &::before {
      background-color: var(--secondary-color);
    }
  }

  /**
   * Layout Builder
   */
  .layout-builder__add-block {
    grid-column: 1 / -1 !important;
    position: relative;
  }

  &.background-primary,
  &.background-secondary {
    min-height: 320px; /* The height of .shape-bottom-right + border-radius-xxxl */

    &::before {
      transition: var(--transition-fade);
      transition-delay: 1s;
      transition-property: background-color;
    }

  }

  &.background-secondary {
    .layout-builder__add-block a {
      border-color: var(--white) !important;
      color: var(--white) !important;

      &:hover {
        border-color: var(--gin-color-primary-hover) !important;
      }
    }
  }
}