@use "../../../1-settings/class-vars";
@use "../../../1-settings/media-size-vars";

#{class-vars.$base-class} {
  .landing-page-template {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .content-width {
      max-width: calc(var(--content-width-narrow) + (2 * var(--spacing-2xl)));
      padding: 0 var(--spacing-2xl);
      box-sizing: border-box;
    }
  }
}

@media screen and (max-width: #{media-size-vars.$media-size-mobile}) {
  #{class-vars.$base-class} {
    .landing-page-template {
      .content-width {
        padding: 0 var(--spacing-l);
      }
    }
  }
}