/**
 * Color palette ordered by color field according to AFNOR X08-010.
 * Color shades are ordered from lightest (100) to darkest (200).
 * @source https://fr.wikipedia.org/wiki/Champ_chromatique#Recensement_des_champs_chromatiques
 * @source https://adobe.design/stories/design-for-scale/naming-colors-in-design-systems
 */
/**
 * Breakpoints
 */
/**
 * Layout sizes
 */
.customer-cases .customer-cases__surtitle {
  font-size: 1.6rem;
  line-height: 1.25;
}

.customer-cases .customer-cases__surtitle, .customer-case .customer-case__surtitle {
  display: flex;
  align-items: center;
}
.customer-cases .customer-cases__surtitle::before, .customer-case .customer-case__surtitle::before {
  content: "";
  mask-image: url(../assets/svg/irena-monogram.svg);
  -webkit-mask-image: url(../assets/svg/irena-monogram.svg);
  background-color: #c3623f;
  display: inline-block;
  min-width: 1.2rem;
  min-height: 1.2rem;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: contain;
  -webkit-mask-size: contain;
  vertical-align: middle;
  margin-right: 0.8rem;
}

.customer-cases__wrapper {
  max-width: 156.4rem;
  width: 100%;
  padding-right: 4rem;
  padding-left: 4rem;
  margin-right: auto;
  margin-left: auto;
}
.customer-cases .customer-cases__surtitle {
  font-weight: 600;
  margin-bottom: 1.2rem;
  text-transform: uppercase;
}
.customer-cases .customer-cases__surtitle::before {
  background-color: #003057;
}
.customer-cases .customer-cases__title {
  color: #c3623f;
  padding-bottom: 2rem;
  border-bottom: solid 1px rgba(195, 98, 63, 0.4);
  margin-bottom: 5rem;
}
.customer-cases__see-more {
  display: block;
  margin-left: auto;
  margin-right: auto;
  transition: opacity 300ms ease-in-out;
}

.customer-case {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  color: #ffffff;
  padding: 6rem 2rem;
  z-index: 0;
  max-height: 100rem;
  transform: translateY(0rem);
  transition: max-height 300ms ease-in-out 0ms, transform 300ms ease-in-out;
}
.customer-case:not(:last-child) {
  margin-bottom: 5rem;
}
.customer-case.customer-case--hidden {
  max-height: 0;
  overflow: hidden;
  padding: 0;
  margin-bottom: 0;
  transform: translateX(100vw);
}
.customer-case--has-no-background {
  background-color: #c3623f;
  padding: 6rem 2rem;
}
.customer-case--has-no-background .customer-case__tag {
  background-color: #003057;
}
.customer-case--has-no-background .customer-case__content {
  margin-left: 0;
  max-width: 100%;
}
.customer-case--has-no-background svg {
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.1;
}
.customer-case__tag {
  background-color: #c3623f;
  padding: 1rem;
  position: absolute;
  left: -1rem;
  top: -1rem;
}
.customer-case .customer-case__surtitle {
  margin-bottom: 2rem;
  text-transform: uppercase;
  font-weight: 600;
}
.customer-case .customer-case__surtitle::before {
  background-color: #ffffff;
  width: 2rem;
  height: 2rem;
}
.customer-case .customer-case__title,
.customer-case .customer-case__excerpt {
  margin-bottom: 3rem;
}
.customer-case__overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 48, 87, 0.4);
  z-index: -1;
}

@media screen and (min-width: 900px) {
  .customer-cases .customer-cases__surtitle {
    font-size: 2rem;
  }
  .customer-cases .customer-cases__title {
    padding-bottom: 4rem;
  }
  .customer-case {
    padding: 14.8rem 6rem 8rem 6rem;
  }
  .customer-case__content {
    max-width: 71.2rem;
    margin-left: auto;
  }
  .customer-case .customer-case__title,
  .customer-case .customer-case__excerpt {
    margin-bottom: 4rem;
  }
  .customer-case--has-no-background {
    padding: 8rem 12rem;
  }
}