.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) * 3);

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

    > *,
    .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-xxl);
    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-xxl);
        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);
        }
      }

      /* Highlighted team member */
      &.component-highlighted-team-member {
        a,
        .meta-item-value {
          color: var(--white);
        }
      }
    }
  }

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

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

    .shape-top-left path,
    .shape-bottom-right path {
      fill: #005DBA;
    }
  }

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

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

    .shape-top-left path,
    .shape-bottom-right path {
      fill: #D4007E;
    }
  }

  .shape-top-left,
  .shape-bottom-right {
    position: absolute;
    width: 100%;
    overflow: hidden;
    display: flex;
    margin-bottom: 0;

    svg {
      transition:  var(--transition-fade);
      opacity: 0;
      position: absolute;
    }
  }

  .shape-top-left {
    border-top-left-radius: var(--border-radius-xxl);
    border-top-right-radius: var(--border-radius-xxl);
    top: 0;
    left: 0;
    height: 287px;

    svg {
      transform: translate3d(-100%, -25%, 0) scale(0);
      transform-origin: top left;
      top: 0;
      left: 0;
    }

    @media screen and (min-width: 992px) {
      left: calc(var(--spacing) * -5.625);
    }
  }

  .shape-bottom-right {
    border-bottom-right-radius: var(--border-radius-xxl);
    border-bottom-left-radius: var(--border-radius-xxl);
    right: 0;
    bottom: 0;
    height: 296px;

    svg {
      transform: translate3d(100%, 125%, 0) scale(0);
      transform-origin: bottom right;
      margin-left: auto;
      right: 0;
      bottom: 0;
    }

    @media screen and (min-width: 992px) {
      right: calc(var(--spacing) * -5.625);
    }
  }

  &.is-in-viewport {
    .shape-top-left,
    .shape-bottom-right {
      svg {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
      }
    }

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

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

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

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

  /**
   * 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-xxl */


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

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

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