/* suppress nested section padding */
.fragment-wrapper > .section {
  padding-left: 0;
  padding-right: 0;
}

.fragment-wrapper > .section:first-of-type {
  padding-top: 0;
}

.fragment-wrapper > .section:last-of-type {
  padding-bottom: 0;
}

.section.hub-app-container {
  background: var(--bg-color-paper);

  .default-content-wrapper {
    text-align: center;

    h1 {
      margin-bottom: var(--spacing-xs);
    }

    p:nth-of-type(1),
    p:nth-of-type(2) {
      display: inline-block;
      margin: 0 10px;

      picture {
        img {
          height: 50px;
        }
      }
    }
  }
}

.section.fragment-container.marketplace-nl {
  background-color: var(--bg-color-paper);
  padding: var(--spacing-xl) 0;
  margin-top: var(--spacing-xl);

  .columns-container {
    padding: 0;
    text-align: center;

    .columns-wrapper {
      margin-top: var(--spacing-xl);

      .columns > div {
        flex-direction: row;
        align-items: flex-start;

        > div {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: center;

          picture {
            width: 70px;
            height: 70px;
            display: block;

            img {
              width: 100%;
              height: 100%;
            }
          }

          h3 {
            margin: var(--spacing-xs) 0;
            font-size: var(--font-size-m);
          }

          .button-container {
            display: none;
          }
        }
      }
    }
  }

  @media (width <= 768px) {
    .columns-container {
      .columns-wrapper {
        .columns > div {
          display: grid;
          grid-template-columns: 1fr;
          grid-gap: var(--spacing-xl);

          > div {
            padding: 0 var(--spacing-xl);
          }
        }
      }
    }
  }
}

.section.hub-mid-banner {
  .hero-content {
    h4 {
      color: white;
    }

    p.button-container {
      a {
        color: black;
        background: white;

        &::after {
          display: none;
        }
      }
    }
  }

  @media (width < 1240px) {
    .hero-content {
      padding-left: var(--spacing-m);

      > div {
        margin-left: 0;
      }
    }
  }

  @media (width < 1024px) {
    & {
      height: fit-content;

      .hero-wrapper {
        height: fit-content;

        .hero {
          height: fit-content;

          .content {
            height: fit-content;
            flex-direction: column;
            background: var(--color-primary);

            .hero-image0 {
              display: none;
            }

            .hero-image1 {
              height: 300px;

              > div {
                height: 100%;
                clip-path: polygon(0 0, 100% 0%, 85% 100%, 0% 100%);

                picture {
                  height: 100%;

                  img {
                    height: 100%;
                  }
                }
              }
            }

            .hero-content {
              padding: var(--spacing-m);

              &::after {
                display: none;
              }
            }
          }
        }
      }
    }
  }
}