/**************************************************
  BACKGROUND-PAIR
****************************************************/

.background-pair {
  min-height: 33vh;
}
.background-pair .background {
  background-size: cover;
  height: 120%;
  top: -5%;
}
@media screen and (min-width: 768px) {
  .background-pair {
    min-height: 33vh;
  }
}
@media screen and (min-width: 1024px) {
  .background-pair {
    min-height: 66vh;
  }
}

/**************************************************
  ITEM-PAIR
****************************************************/

@media screen and (min-width: 1024px) {
  /* ALTERNATE-PAIR */
  .item-pair:not(.lg\:flex-row-reverse) .content-container {
    padding-right: 8.33%;
  }
  .item-pair:not(.lg\:flex-row-reverse) .text-container {
    padding-left: 8.33%;
    padding-right: 35%;
  }
  .item-pair:not(.lg\:flex-row-reverse) .content-container.gallery-container {
    padding-right: 8.33%;
    padding-left: 25%;
  }

  .item-pair.lg\:flex-row-reverse .content-container {
    padding-left: 8.33%;
  }
  .item-pair.lg\:flex-row-reverse .text-container {
    padding-right: 8.33%;
    padding-left: 35%;
  }
  .item-pair.lg\:flex-row-reverse .content-container.gallery-container {
    padding-left: 8.33%;
    padding-right: 25%;
  }
}
.item-pair ul {
  list-style: disc;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 20px;
}
.item-pair li {
  color: #888a8b;
}
.item-pair li::marker {
  color: #c8102e;
}

/**************************************************
  ALTERNATE-PAIR
****************************************************/

.date-container > span::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #c8102e !important;
}

.alternate-container .gallery-column > div {
  width: 45%;
}

.alternate-container .gallery-column,
.gallery-column {
  max-width: 20rem;
  margin: 0 auto;
}

.alternate-container ul {
  list-style: disc;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 20px;
}
.alternate-container li {
  color: #888a8b;
}
.alternate-container li::marker {
  color: #c8102e;
}

/*  BREAKPOINT lg */
@media screen and (min-width: 1024px) {
  /* ALTERNATE-PAIR */
  .alternate-container:not(.lg\:flex-row-reverse) .content-container {
    padding-right: 8.33%;
  }
  .alternate-container:not(.lg\:flex-row-reverse) .text-container {
    padding-left: 8.33%;
    padding-right: 16.666%;
  }
  .alternate-container:not(.lg\:flex-row-reverse)
    .content-container.gallery-container {
    padding-right: 8.33%;
    padding-left: 16.666%;
  }

  .alternate-container.lg\:flex-row-reverse .content-container {
    padding-left: 8.33%;
  }
  .alternate-container.lg\:flex-row-reverse .text-container {
    padding-right: 8.33%;
    padding-left: 16.666%;
  }
  .alternate-container.lg\:flex-row-reverseì
    .content-container.gallery-container {
    padding-left: 8.33%;
    padding-right: 16.666%;
  }

  .alternate-container.date:not(.lg\:flex-row-reverse) > div:first-child,
  .alternate-container.date.lg\:flex-row-reverse > div:last-child {
    position: relative;
  }

  .alternate-container.date:not(.lg\:flex-row-reverse)
    > div:first-child::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0px;
    height: 100%;
    width: 1px;
    background-color: #afb1b366;
  }
  .alternate-container.date.lg\:flex-row-reverse > div:last-child::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 1px;
    background-color: #afb1b366;
  }

  .alternate-container.lg\:flex-row-reverse .date-container {
    text-align: left;
  }
  .alternate-container:not(.lg\:flex-row-reverse) .date-container {
    text-align: right;
  }

  .gallery-column > div {
    width: 10.5rem;
  }
  .gallery-column {
    max-width: none;
    width: 23rem;
    margin-right: auto;
    margin-left: auto;
  }

  .gallery-column > div:not(:first-child) {
    margin-top: -11%;
  }

  .alternate-container .gallery-column {
    max-width: 100%;
    margin: 0 auto;
  }
}

@media screen and (min-width: 1280px) {
  .alternate-container:not(.lg\:flex-row-reverse) .text-container {
    padding-right: 25%;
  }
  .alternate-container:not(.lg\:flex-row-reverse)
    .content-container.gallery-container {
    padding-left: 25%;
  }
  .alternate-container.lg\:flex-row-reverse .text-container {
    padding-left: 25%;
  }
  .alternate-container.lg\:flex-row-reverseì
    .content-container.gallery-container {
    padding-right: 25%;
  }
}
/* BREAKPOINT almost xxl */
@media screen and (min-width: 1500px) {
  .alternate-container .gallery-column {
    max-width: none;
    width: 22rem;
    margin-right: auto;
    margin-left: auto;
  }
}