:root{
  --flexified-padding: 0px;
}

.flexified-wrapper {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;

  .flexified-child:before {
      content: '';
      float: left;
      padding-top: 100%;
  }

  &:not(.flexified-mobile){
      &.flexified-full-width-last-item{
          .flexified-child{
              &:last-child {
                  flex-grow: 1;
                  height: auto;

                  &:before{
                      padding-top: calc(33% - (14px / 2));
                      padding-top: calc(33% - (var(--flexified-padding) / 2));
                  }
              }
          }
      }
      &.flexified-two-thirds-width-last-item{
          .flexified-child{
              &:last-child {
                  flex-grow: 1;
                  height: auto;
                  margin-left: 14px;
                  margin-left: var(--flexified-padding);

                  &:before{
                      padding-top: calc(50% - (14px / 2));
                      padding-top: calc(50% - (var(--flexified-padding) / 2));
                  }
              }
          }
      }

      &.flexified-items-odd{
          .flexified-child {
              width: calc(100% / 3 - (14px * 0.66));
              width: calc(100% / 3 - (var(--flexified-padding) * 0.66));
              margin-bottom: 14px;
              margin-bottom: var(--flexified-padding);
          }

          &.flexified-item-count-1{
              .flexified-child{
                  width: 100%;

                  &:before{
                      padding-top: 33%;
                  }
              }
          }
      }

      &.flexified-items-even{
          .flexified-child {
              width: calc(100% / 4 - (14px * 0.75));
              width: calc(100% / 4 - (var(--flexified-padding) * 0.75));
              margin-bottom: 14px;
              margin-bottom: var(--flexified-padding);
          }

          &.flexified-item-count-2{
              .flexified-child{
                  width: calc(100% / 2 - (14px / 2));
                  width: calc(100% / 2 - (var(--flexified-padding) / 2));
              }
          }
      }
  }


  &.flexified-mobile{
      justify-content: center;

      .flexified-child {
          width: calc(100% / 2 - (14px) * 0.75);
          width: calc(100% / 2 - (var(--flexified-padding)) * 0.75);
          margin-bottom: calc(14px * 1.5);
          margin-bottom: calc(var(--flexified-padding) * 1.5);

          &:nth-child(even){
              margin-left: calc(14px * 1.5);
              margin-left: calc(var(--flexified-padding) * 1.5);
          }
      }

      &.flexified-items-odd{
          &.flexified-wide-last-item{
              .flexified-child{
                  &:last-child {
                      width: 100%;
      
                      &:before{
                          flex-grow: 1;
                          height: auto;
                          padding-top: calc(50% - (14px / 1.5));
                          padding-top: calc(50% - (var(--flexified-padding) / 1.5));
                      }
                  }
              }
          }
      }
  }
}