/**
 * Container styles loads on front end and back end
 */

.dggb-block-container {
  margin: 0;
  position: relative;
  padding: 0;

  &.alignfull {
    .block-editor-block-list__block {
      max-width: 100%;
    }
  }

  &.alignfull .dggb-container-inside,
  &.alignfull .dggb-container-inside {
    @media only screen and (min-width: 768px) {
      max-width: 100%;
      margin: 0 auto;
    }
  }

  &.alignwide .dggb-container-inside,
  &.alignwide .dggb-container-inside {
    @media only screen and (min-width: 768px) {
      max-width: 80%;
      margin: 0 auto;
    }
  }

  .dggb-container-image-wrap {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 100%;
    z-index: 0;
  }

  .dggb-container-image {
    object-fit: cover;
    height: 100%;
    width: 100%;
    transition: 0.3s ease;
  }

  .dggb-container-content {
    margin: 0 auto;
    position: relative;
  }

  .dggb-container-image:not(.has-background-dim) {
    opacity: 0;
  }

  .has-background-dim {
    opacity: 0.5;
  }

  .has-background-dim-10 {
    opacity: 0.1;
  }

  .has-background-dim-20 {
    opacity: 0.2;
  }

  .has-background-dim-30 {
    opacity: 0.3;
  }

  .has-background-dim-40 {
    opacity: 0.4;
  }

  .has-background-dim-50 {
    opacity: 0.5;
  }

  .has-background-dim-60 {
    opacity: 0.6;
  }

  .has-background-dim-70 {
    opacity: 0.7;
  }

  .has-background-dim-80 {
    opacity: 0.8;
  }

  .has-background-dim-90 {
    opacity: 0.9;
  }

  .has-background-dim-100 {
    opacity: 1;
  }
}