@use '../abstracts' as *;
@use "../util/scaling" as scale;


.container {
  padding: var(--site-spacing) var(--site-padding);
  z-index: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;

  &.no-spacing {
    padding: 0 var(--site-padding);
  }
}

.image-container, .media-container {
  img {
    width: 100%;
    height: auto;
  }
}

// Panels on side of the site
.panels {
  min-height: calc(var(--vh, 1vh) * 100);
  position: relative;

  &:before, &:after {
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg width='75' height='75' viewBox='0 0 85 85' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M73.38 62.51V73.42H62.48L73.38 62.51V62.51ZM59.94 74.47H74.42V59.98L59.94 74.47ZM1.05 62.51L11.95 73.42H1.05V62.51V62.51ZM0 74.47H14.48L0 59.98V74.47ZM42.7 67.34L67.31 42.72H73.38V48.79L48.77 73.41H42.7V67.33V67.34ZM66.87 41.67L41.79 66.76L41.64 66.91V74.47H49.19L74.26 49.38L74.41 49.23V41.67H66.86H66.87ZM20.82 42.72H31.72V53.62L20.82 42.72ZM18.29 41.67L32.77 56.16V41.67H18.29V41.67ZM42.69 42.72H53.59L42.69 53.62V42.72ZM41.64 41.67V56.16L56.13 41.67H41.64ZM1.05 48.79V42.72H7.12L31.73 67.34V73.42H25.66L1.05 48.79ZM0 41.66V49.22L25.07 74.3L25.22 74.46H32.78V66.9L7.71 41.82L7.56 41.67H0V41.66ZM31.73 20.84V31.75H20.83L31.73 20.84V20.84ZM18.3 32.8H32.78V18.31L18.3 32.8ZM42.7 20.84L53.6 31.75H42.7V20.84ZM41.65 32.8H56.14L41.65 18.31V32.8ZM1.05 1.05H11.95L1.05 11.95V1.05ZM0 0V14.49L14.48 0H0ZM1.05 25.67L25.66 1.05H31.73V7.12L7.12 31.75H1.05V25.68V25.67ZM25.23 0L0.15 25.08L0 25.23V32.79H7.56L32.63 7.72L32.78 7.57V0H25.22H25.23ZM42.7 7.12V1.05H48.77L73.38 25.67V31.74H67.31L42.7 7.12ZM41.65 0V7.56L66.72 32.64L66.88 32.79H74.43V25.23L49.36 0.16L49.21 0H41.65V0ZM62.48 1.05H73.38V11.95L62.48 1.05V1.05ZM59.94 0L74.42 14.49V0H59.94V0Z' fill='%23A9794D'/%3E%3C/svg%3E%0A");
    background-size: scale.sm-vw-px(80);
    position: absolute;
    top: 0;
    height: 100%;
    width: var(--panel-width);
    background-position: left;
    z-index: 10;
  }

  &:before {
    left: 0;
  }

  &:after {
    right: 0;
  }

  &.pattern {
    &:before {
      transform: scaleX(-1);
    }
  }
}


//
// Mobile only
//--------------------------------------------------------------------- */
@media (max-width: $medium-breakpoint) {
}

//
// Tablet
//--------------------------------------------------------------------- */
@media (min-width: $medium-breakpoint) {

  //.panels {
  //  &:before, &:after {
  //  }
  //}
}

//
// Desktop
//--------------------------------------------------------------------- */
@media (min-width: $large-breakpoint) {

  .panels {
    &:before, &:after {
      background-size: scale.lg-vw-px(130);
    }
  }

}