/**
 * #.# Styles
 *
 * CSS for both Frontend+Backend.
 */

.wp-block-sno-block-snolab-background  {
  position: relative;
  background-repeat: no-repeat;
  background-size: 30rem;

  @media screen and (max-width: $tablet) {
    .background-dots {
      display: none;
    }
  }

  &.bg-top-left {
    .background-dots {
      transform: scaleX(-1);
      left: 0;
    }
  }

  &.bg-top-right {
    .background-dots {
      right: 0;
    }
  }

  &.bg-color-light-blue {
    background-color: $primary-hl9; 

    .background-dots {
      svg path {
        fill: #D9E9F4;
      }
    }
  }

  > .wp-block-sno-block-snolab-background {
    max-width: $fullhd + 140px;
    margin: 0 auto;
    padding-right: 3rem;
    padding-left: 3rem;

    .container {
      padding: 0;
    }

    @media only screen and (min-width: $tablet) {
      padding-right: 5rem;
      padding-left: 5rem;
    }

    @media only screen and (min-width: $desktop) {
      padding-right: 7rem;
      padding-left: 7rem;
    }
  }
}

.page-child main > .wp-block-sno-block-snolab-background {
  margin-left: calc(-100vw / 2 + 100% / 2);
  margin-right: calc(-100vw / 2 + 100% / 2);
  max-width: 99.5vw;
  
  & > * {
    max-width: $fullhd + 140px;
    margin: 0 auto;
    padding-right: 3rem;
    padding-left: 3rem;

    .container {
      padding: 0;
    }

    @media only screen and (min-width: $tablet) {
      padding-right: 5rem;
      padding-left: 5rem;
    }

    @media only screen and (min-width: $desktop) {
      padding-right: 7rem;
      padding-left: 7rem;
    }
  }
}