@import '~scss/dimensions';

.gblx-widget-columns {
  &__caption,
  &__content { 
    text-align: center; 
    margin: 10px auto;
  }
}

.gblx-widget-columns__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  @include large-screen { flex-direction: row; }
}

.gblx-widget-columns__column {
  @include large-screen {
    flex: 1;
    width: 0;
  }

  &__content { 
    padding: 0 6%;
    overflow: hidden; 
  }
}

.gblx-widget-columns__image {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gblx-widget-columns__image-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 100%;

  &.has-image { border: none; }
}

.gblx-widget-columns__image-wrapper > :first-child {
  position: absolute;
  width: 100%;
  height: 100%;
}

.gblx-widget-columns__add-image {
  .dashicon { margin: 0 auto; }
}

.gblx-widget-columns__blurb {
  text-align: center;

  &.is-quote {
    text-align: left;
  }

  &__quote-icon { 
    float: left; 
    margin-right: 4px;
  }
}