:root {
  --socialwall-liste-grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  --socialwall-liste-grid-gap: var(--gutter-y) var(--gutter-x);

  --socialwall-placeholder-ratio-w: 1;
  --socialwall-placeholder-ratio-h: 1;
  --socialwall-placeholder-bg: #eee;

  --socialwall-loader-size: 4.5rem;
  --socialwall-loader-width: 4px;
  --socialwall-loader-color: #fff;
}


/*------------------------------------------------
::
:: LISTE
::
--------------------------------------------------*/
.sw-list {
  display: grid;
  grid-template-columns: var(--socialwall-liste-grid-template-columns);
  grid-gap: var(--socialwall-liste-grid-gap);
}


/*------------------------------------------------
::
:: POST / ITEM
::
--------------------------------------------------*/
.sw-post {
  word-break: break-word;
  overflow-wrap: break-word;
}


/*------------------------------------------------
::
:: PLACEHOLDER SOCIALWALL
::
--------------------------------------------------*/
.sw-placeholder-item {
  position: relative;
  display: flex;
  background-color: var(--socialwall-placeholder-bg);
}

.sw-placeholder-item:before {
  content: "";
  width: 100%;
  padding-top: calc(var(--socialwall-placeholder-ratio-h) / var(--socialwall-placeholder-ratio-w) * 100%);
}


/*------------------------------------------------
::
:: LOADER
::
--------------------------------------------------*/
.sw-loader {
  position: absolute;
  display: block;
  width: var(--socialwall-loader-size);
  height: var(--socialwall-loader-size);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.sw-loader span {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border: var(--socialwall-loader-width) solid var(--socialwall-loader-color);
  border-radius: 50%;
  animation: sw-loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: var(--socialwall-loader-color) transparent transparent transparent;
}
.sw-loader span:nth-child(1) {
  animation-delay: -0.45s;
}
.sw-loader span:nth-child(2) {
  animation-delay: -0.3s;
}
.sw-loader span:nth-child(3) {
  animation-delay: -0.15s;
}

@keyframes sw-loader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}