@use "00-base/configure" as *;

.ma__featured-item-mosaic {

    @include ma-container();
}

.ma__featured-item-mosaic__container {
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: 10px;

    @media ($bp-small-min) {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
    }

    .ma__divider {
      margin-top: 20px;

      @media ($bp-small-min) {
        margin-top: 50px;
      }

    }

}

.ma__featured-item-mosaic__column {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;

    .ma__featured-item + .ma__featured-item {
        margin-top: 20px;
    }

    @media ($bp-small-min) {
      display: flex !important; // override JS-hidden accordion behavior on non-mobile
      flex-basis: 50%;
      max-width: 50%;
      flex-direction: row;
    }

    @media ($bp-large-min) {
      flex-basis: 33%;
      max-width: 33%;
    }


    @media ($bp-small-min) and ($bp-large-max) {
    //       last odd child gets flowed

      &:last-child:nth-child(odd) {
        flex-basis: 100%;
        max-width: 100%;
        justify-content: space-between;

        .ma__featured-item {
          margin-top: 0;
          width: calc(50% - 10px);
        }
      }
    }

}