.landingPage {
  position: relative;

  display: flex;
  flex-direction: column;
  gap: var(--gap--xl);
  align-items: stretch;
  justify-content: start;

  background-color: rgb(var(--background--neutral-base-default--light));

  @media @screen-sm {
    padding: var(--padding--md);
    box-shadow: var(--shadow--medium-soft--light);
  }

  @media @screen-lg {
    padding: var(--padding--lg);
  }

  @media @screen-xxl {
    padding: var(--padding--xl);
  }
}

.landingPage__section {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: stretch;
  justify-content: start;

  width: 100%;
  padding: 0;
}

.landingPage__section-header {
  display: flex;
  flex-direction: column;
  gap: var(--gap--sm);
  align-items: stretch;
  justify-content: start;

  max-width: 826px;
  margin: 0 auto;
  padding: var(--padding--xl) 0;

  // TODO: https://github.com/shoptet/cms4/issues/10138
  & > .v2form,
  & > .typography,
  & > .systemMessage {
    margin-top: unset;
    margin-bottom: unset;
  }
}

.landingPage__section-content {
  --maxWidth: min-content;
  --paddingHorizontal: 0px;

  display: flex;
  flex-direction: column;
  gap: var(--gap--xl);
  align-items: stretch;
  justify-content: start;

  width: min(var(--maxWidth), calc(100% - (2 * var(--paddingHorizontal))));
  padding: var(--padding--xl) var(--paddingHorizontal);

  // TODO: https://github.com/shoptet/cms4/issues/10138
  & > .v2form,
  & > .typography,
  & > .systemMessage {
    margin-top: unset;
    margin-bottom: unset;
  }
}

.landingPage__section-content--maxWidthFit,
.landingPage__section-content--maxWidthLarge,
.landingPage__section-content--maxWidthMedium {
  margin: 0 auto;
}

.landingPage__section-content--maxWidthLarge {
  --maxWidth: 1150px;
  --paddingHorizontal: var(--padding--xl);
}

.landingPage__section-content--maxWidthMedium {
  --maxWidth: 826px;
}

.landingPage__section-content video {
  width: 100%;
}

.landingPage__section-actions {
  --maxWidth: min-content;

  display: grid;
  gap: var(--gap--lg);

  width: min(var(--maxWidth), calc(100%));
  margin: 0 auto;
  padding: var(--padding--xl) 0;
}

@media @screen-md {
  .landingPage__section-actions--2columns {
    grid-template-columns: repeat(2, 1fr);
  }

  .landingPage__section-actions--3columns {
    grid-template-columns: repeat(3, 1fr);
  }

  .landingPage__section-actions--4columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media @screen-lg {
  .landingPage__section-actions--4columns {
    grid-template-columns: repeat(4, 1fr);
  }
}