.animate[data-b="brief"] .content .left,
.animate[data-b="brief"] .content .right {
  transition: opacity 1s ease, transform 1s ease;
}
.animate[data-b="brief"] .content .right {
  transition-delay: 0.15s;
}
.animate[data-b="brief"] .bg .images > li {
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.animate[data-b="brief"] .bg .images > li:nth-child(1) {
  transition-delay: 0.2s;
}
.animate[data-b="brief"] .bg .images > li:nth-child(2) {
  transition-delay: 0.4s;
}
.animate[data-b="brief"] .bg .images > li:nth-child(3) {
  transition-delay: 0.6s;
}
.animate[data-b="brief"] .bg .images > li:nth-child(4) {
  transition-delay: 0.8s;
}
.animate[data-b="brief"] .bg .images > li:nth-child(5) {
  transition-delay: 1s;
}
.animate[data-b="brief"] .bg .images > li:nth-child(6) {
  transition-delay: 1.2s;
}
.animate[data-b="brief"] .bg .images > li:nth-child(7) {
  transition-delay: 1.4s;
}
.animate[data-b="brief"] .bg .images > li:nth-child(8) {
  transition-delay: 1.6s;
}
.animate[data-b="brief"] .bg .images > li:nth-child(9) {
  transition-delay: 1.8s;
}
.animate[data-b="brief"] .bg .images > li:nth-child(10) {
  transition-delay: 2s;
}
.animate[data-b="brief"]:not(.in-viewport) .bg .images > li {
  opacity: 0;
  transform: scale(0.9);
  transition-delay: 0s;
}
.animate[data-b="brief"]:not(.in-viewport) .content .left,
.animate[data-b="brief"]:not(.in-viewport) .content .right {
  opacity: 0;
}
.animate[data-b="brief"]:not(.in-viewport) .content .left {
  transform: translateX(-10%);
}
.animate[data-b="brief"]:not(.in-viewport) .content .right {
  transform: translateX(10%);
}
.animate[data-b="event-type-preview"] .content [data-e="title"],
.animate[data-b="event-type-preview"] .content p {
  transition: opacity 0.5s ease;
}
.animate[data-b="event-type-preview"] .content [data-e="title"] {
  transition-delay: 0.3s;
}
.animate[data-b="event-type-preview"] .content p {
  transition-delay: 0.5s;
}
.animate[data-b="event-type-preview"] .slider > [data-direction] {
  transition: opacity 0.5s 1s ease;
}
.animate[data-b="event-type-preview"] .slider > .event::before {
  position: absolute;
  content: '';
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #252a30;
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.animate[data-b="event-type-preview"] .slider > .event[data-index="1"]::before {
  transition-delay: 0.5s;
}
.animate[data-b="event-type-preview"] .slider > .event[data-index="7"]::before {
  transition-delay: 1s;
}
.animate[data-b="event-type-preview"] .slider > .event[data-index="6"]::before {
  transition-delay: 1.5s;
}
.animate[data-b="event-type-preview"] .slider > .event[data-index="2"]::before {
  transition-delay: 2s;
}
.animate[data-b="event-type-preview"] .slider > .event[data-index="5"]::before {
  transition-delay: 2.5s;
}
.animate[data-b="event-type-preview"] .slider > .event[data-index="4"]::before {
  transition-delay: 2.5s;
}
.animate[data-b="event-type-preview"] .slider > .event[data-index="3"]::before {
  transition-delay: 2.5s;
}
.animate[data-b="event-type-preview"]:not(.in-viewport) .content [data-e="title"],
.animate[data-b="event-type-preview"]:not(.in-viewport) .content p,
.animate[data-b="event-type-preview"]:not(.in-viewport) .slider > .event::before,
.animate[data-b="event-type-preview"]:not(.in-viewport) .slider > [data-direction] {
  opacity: 1;
  transition-delay: 0s;
}
.animate[data-e="event-wide"] .image,
.animate[data-e="event-wide"] .info {
  transition: opacity 1s ease;
}
.animate[data-e="event-wide"] .image {
  transition-delay: 0.1s;
}
.animate[data-e="event-wide"] .info {
  transition-delay: 0.3s;
}
.animate[data-e="event-wide"]:not(.in-viewport) .image,
.animate[data-e="event-wide"]:not(.in-viewport) .info {
  opacity: 0;
  transition-delay: 0s;
}
.animate[data-e="event-square"] .image,
.animate[data-e="event-square"] .info,
.animate[data-e="event-square"] .event-title {
  transition: opacity 1s ease;
}
.animate[data-e="event-square"] .image,
.animate[data-e="event-square"] .info {
  transition-delay: 0.1s;
}
.animate[data-e="event-square"] .event-title {
  transition-delay: 0.5s;
}
.animate[data-e="event-square"]:not(.in-viewport) .image,
.animate[data-e="event-square"]:not(.in-viewport) .info,
.animate[data-e="event-square"]:not(.in-viewport) .event-title {
  opacity: 0;
  transition-delay: 0s;
}
[data-b="post"] > .animate {
  transition: opacity 1s ease, transform 1s ease;
}
[data-b="post"] > .animate:not(.in-viewport) {
  opacity: 0;
  transform: translateY(-1rem);
}