.list-teasers {
  display: flow-root;
}
.list-teasers__inner {
  margin-top: calc(var(--spacing) * -1);
}
.list-teasers__inner__item {
  margin-top: calc(var(--spacing) * 1);
}
.list-teasers__button {
  margin-top: var(--spacing);
}
.list-teasers .title + .list-teasers__inner {
  margin-top: 0;
}
@media (max-width: 767px) {
  .list-teasers__inner {
    margin-top: calc(var(--spacing) * -2);
  }
  .list-teasers__inner__item {
    margin-top: calc(var(--spacing) * 2);
  }
}
@media (min-width: 768px) {
  .list-teasers {
    --item-width: 33.3334%;
  }
  .list-teasers__inner {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-left: calc(var(--spacing) * -0.5);
    margin-right: calc(var(--spacing) * -0.5);
  }
  .list-teasers__inner__item {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-basis: var(--item-width);
    flex-basis: var(--item-width);
    padding-left: calc(var(--spacing) * 0.5);
    padding-right: calc(var(--spacing) * 0.5);
  }
  .list-teasers__inner__item > * {
    -webkit-flex: 1;
    flex: 1;
  }
  .list-teasers--layout-1, .list-teasers--layout-3 {
    --item-width: 100%;
  }
  .list-teasers--layout-4 {
    --item-width: 50%;
  }
}
@media (min-width: 768px) and (max-width: 991px) {
  .list-teasers--layout-1 .teaser--flip {
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }
  .list-teasers--layout-1 .teaser--flip .list-teasers__content,
  .list-teasers--layout-1 .teaser--flip .list-teasers__image {
    margin-top: 0;
    -webkit-flex: 1;
    flex: 1;
  }
  .list-teasers--layout-1 .teaser--flip .list-teasers__image {
    margin-left: var(--spacing);
  }
}
@media (min-width: 992px) {
  .list-teasers {
    --item-width: 33.3334%;
  }
  .list-teasers--layout-1, .list-teasers--layout-2, .list-teasers--layout-4 {
    --item-width: 33.3334%;
  }
  .list-teasers--layout-3 {
    --item-width: 50%;
  }
  .list-teasers--layout-3 .list-teasers__inner__item {
    -webkit-flex-basis: 50%;
    flex-basis: 50%;
  }
}
@media (min-width: 1200px) {
  .list-teasers {
    --item-width: 25%;
  }
  .list-teasers--layout-1 {
    --item-width: 33.3334%;
  }
  .list-teasers--layout-2 .list-teasers__inner__item:nth-child(1), .list-teasers--layout-2 .list-teasers__inner__item:nth-child(2), .list-teasers--layout-2 .list-teasers__inner__item:nth-child(3) {
    --item-width: 33.3334%;
  }
  .list-teasers--layout-3 {
    --item-width: 50%;
  }
}