Sermon Manager CSS

Additional Default CSS

/**
* Additional Default CSS
*****************************************/
.wpfc-sermon-container {
  max-width: 1100px;
  margin: 2em auto;
  padding: 0 1em;
}

.wpfc_sermon {margin: 0 auto 2em;}

#wpfc_sermon_sorting {justify-content: center;}

3-Column w/Flexbox

/**
* 3-Column w/Flexbox
*****************************************/
.wpfc-sermon-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1100px;
  margin: 2em auto;
}

.wpfc-sermon {
  width: 32%;
  margin: 0 auto 2em;
}

.wpfc-sermon-inner {
  display: block;
  flex-flow: inherit;
  height: 100%;
}

.wpfc-sermon-main,  
.wpfc-sermon-image {flex: inherit;}

.wpfc-sermon-image-img {
  height: 100%;
  padding-top: 100%;
}

.sm-pagination,
#wpfc_sermon_sorting {width: 100%;}

#wpfc_sermon_sorting {justify-content: center;}

3-Column w/Grid

/**
* 3-Column w/Grid
*****************************************/
.wpfc-sermon-container {
  display: grid;
  grid-template-columns: repeat( 1, 100% );
  width: 1100px;
  margin: 2em auto;
}

.wpfc-sermon {
  width: 350px;
  margin: 0 0 2em;
}

.wpfc-sermon-inner {
  display: block;
  flex-flow: inherit;
  height: 100%;
}

.wpfc-sermon-main,  
.wpfc-sermon-image {flex: inherit;}

.wpfc-sermon-image-img {
  height: 100%;
  padding-top: 100%;
}

.sm-pagination,
#wpfc_sermon_sorting {grid-column: span 1;}

@media (min-width: 50em) {

  .sm-pagination,
  #wpfc_sermon_sorting {grid-column: span 2;}

  .wpfc-sermon-container {
    grid-template-columns: repeat( 2, 49% );
    grid-column-gap: 1%;
  }

}

@media (min-width: 60em) {

  .sm-pagination,
  #wpfc_sermon_sorting {grid-column: span 3;}

  .wpfc-sermon-container {
    grid-template-columns: repeat( 3, 32% );
    grid-column-gap: 2%;
  }

}