/**
 * #.# Common SCSS
 *
 * Can include things like variables and mixins
 * that are used across the project.
*/
/**
 * #.# Styles
 *
 * CSS for both Frontend+Backend.
 */
.wp-block-cgb-kona-instagram-for-gutenberg {
  margin: 0 auto; }
  @media all and (max-width: 375px) {
    .wp-block-cgb-kona-instagram-for-gutenberg .kona-grid {
      grid-template-columns: repeat(1, 1fr) !important; } }
  @media all and (min-width: 375px) and (max-width: 540px) {
    .wp-block-cgb-kona-instagram-for-gutenberg .kona-grid {
      grid-template-columns: repeat(2, 1fr) !important; } }
  @media all and (min-width: 540px) and (max-width: 786px) {
    .wp-block-cgb-kona-instagram-for-gutenberg .kona-grid {
      grid-template-columns: repeat(4, 1fr) !important; } }
  .wp-block-cgb-kona-instagram-for-gutenberg .kona-grid.use-thumbnail {
    grid-auto-rows: -webkit-min-content;
    grid-auto-rows: min-content; }

.display-grid {
  display: grid; }

/* flexbox fallback if the browser does not support display:grid */
@supports not (display: grid) {
  .display-grid {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: row wrap;
        flex-wrap: row wrap; }
    .display-grid > * {
      -ms-flex: 0 1 1;
          flex: 0 1 1; } }

/**
Image Styling
**/
.kona-image-wrapper {
  position: relative; }
  .kona-image-wrapper:hover .kona-image-overlay {
    opacity: 1; }
  .kona-image-wrapper:hover img {
    opacity: 0.6; }
  .kona-image-wrapper.has-equal-images {
    overflow: hidden;
    padding-bottom: 100%; }
    .kona-image-wrapper.has-equal-images img {
      position: absolute;
      -o-object-fit: cover;
         object-fit: cover;
      width: 100%;
      height: 100%; }

.kona-image {
  display: block;
  margin: 0 auto; }

.kona-image-overlay {
  -webkit-transition: all 0.25s ease-in;
  -o-transition: all 0.25s ease-in;
  transition: all 0.25s ease-in;
  position: absolute;
  background-color: transparent;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0; }
  .kona-image-overlay:before {
    content: ' ';
    opacity: 1;
    background: url(../assets/instagram-icon-white.svg) no-repeat center center;
    background-size: 30px 30px;
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0; }

/**
Profile pictures
**/
.kona-profile-container {
  display: block;
  margin-bottom: 1rem; }
  @media all and (min-width: 541px) {
    .kona-profile-container {
      display: grid;
      grid-template-columns: 60px auto;
      grid-column-gap: 1rem; } }

.kona-profile-picture {
  border-radius: 100%; }

.kona-bio-container h3,
.kona-bio-container p {
  margin-top: 0;
  margin-bottom: 0; }