/*
	Table of content
    1. GENERAL
    2. ICONS
    3. ROUND IMAGE
    4. IMAGE & IMAGES
    5. FAQ
    6. TESTIMONIAL
    7. LOGOS
    8. LARGE IMAGE
    9. CTA
    10. VACANCIES
    11. SPEAKERS
    12. VIDEO & TEXT
    13. LINKEDIN
    14. TEXT FRAME
    15. CONTACT
    16. TEXT 2 COLUMNS
    17. LOCATIONS
    18. TEXT BLACK
    19. TABLE
    20. MAP
    21. SLOGAN
    22. CTA (PERSONAL)
    23. TEXT
    24. CASES
*/

/* 1. GENERAL */
.content img {
  border-radius: 1.3rem;
}

.content:not(.content-vacancies) .label {
  color: var(--color-blue);
}

/* 2. ICONS */
.content-icons .container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2rem;
}

.content-icons .content-wrapper {
  padding: 7rem 11rem 0 0;
}

.content-icons .icons-wrapper {
  position: relative;
  padding: 4rem;
  border-radius: 1.3rem;
  background-color: var(--color-lightgrey);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  grid-gap: 2rem;
}

.content-icons .icons-wrapper::before {
  content: "";
  position: absolute;
  top: 10rem;
  left: -2.1rem;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 2.1rem 2.1rem 2.1rem 0;
  border-color: transparent var(--color-lightgrey) transparent transparent;
}

.content-icons .icons-wrapper > a {
  color: inherit;
  text-decoration: inherit;
}

.content-icons .icon-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 100%;
  border-radius: 1.3rem;
  background-color: white;
  transition: 0.4s;
}

.content-icons .icons-wrapper > a:hover .icon-wrapper {
  background-color: var(--color-blue);
}

.content-icons .icon {
  position: absolute;
  top: 10%;
  left: 10%;
  width: 80%;
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.content-icons .icon img {
  width: 8rem;
  height: 6.4rem;
  object-fit: contain;
  object-position: center;
}

.content-icons .title {
  margin-top: 2rem;
  font-family: "Mont";
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

/* 3. ROUND IMAGE */
.content-round-image .container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 2rem;
}

.content-round-image .image-wrapper {
  padding: 0 11rem 0 5rem;
}

.content-round-image .image {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 100%;
}

.content-round-image .image::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 12.5%;
  left: -5rem;
  width: 100%;
  height: 75%;
  background-image: url(../images/icon-circlepart-blue.svg);
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
}

.content-round-image .image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

.content-round-image .content-wrapper {
  padding-top: 7rem;
}

/* 4. IMAGE & IMAGES */
.content-image .container,
.content-images .container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  grid-gap: 6rem;
}

.content-image .container.divide-33-67 {
  grid-template-columns: 1fr 2fr;
}

.content-image .container.divide-33-67.flip-yes {
  grid-template-columns: 2fr 1fr;
}

.content-image .container.flip-yes .image-wrapper {
  order: 2;
}

.content-small-image .image-wrapper {
  width: 100%;
  max-width: 64rem;
}

.content-image .image {
  text-align: center;
}

.content-images .image,
.content-small-image .image {
  position: relative;
  height: 0;
  padding-top: 63%;
}

.content-image .image img,
.content-images .image img,
.content-small-image .image img {
  max-width: 100%;
}

.content-images .image img,
.content-small-image .image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.content-image .caption,
.content-images .caption,
.content-small-image .caption {
  margin-top: 0.5rem;
  color: #969696;
}

.content-image .container.flip-yes .content-wrapper {
  order: 1;
}

.content-image .label {
  padding-top: 3rem;
}

/* 5. FAQ */
.content-faq h2 {
  text-align: center;
}

.content-faq .tiles {
  margin-top: 4rem;
  border-top: 0.1rem solid #ddd;
}

.content-faq .tile {
  padding: 2.5rem 4rem;
  border-bottom: 0.1rem solid #ddd;
  background-image: url(../images/icon-plus2-grey.svg);
  background-repeat: no-repeat;
  background-size: 1.5rem 1.5rem;
  background-position: calc(100% - 4rem) 3rem;
  cursor: pointer;
}

.content-faq .tile.active {
  background-color: var(--color-lightgrey);
  background-image: url(../images/icon-minus2-black.svg);
  background-position: calc(100% - 4rem) 3.1rem;
}

.content-faq .title {
  width: 90%;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
}

.content-faq .tile .text {
  width: 90%;
  margin-top: 1.5rem;
  font-size: 1.6rem;
  display: none;
}

/* 6. TESTIMONIAL */
.content-testimonial .text {
  position: relative;
  margin-bottom: 3rem;
  padding: 3rem 5rem;
  border-radius: 1.3rem;
  background-color: var(--color-red);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.5;
}

.content-testimonial .text::before {
  content: "";
  position: absolute;
  bottom: -1.25rem;
  left: 5rem;
  width: 3rem;
  height: 3rem;
  background-image: url(../images/icon-triangle2-red.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

.content-testimonial .reviewer-wrapper {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.content-testimonial .image-wrapper {
  flex: 0 0 12rem;
}

.content-testimonial .image {
  position: relative;
  width: 10.8rem;
  height: 10.8rem;
  margin-left: 1.2rem;
}

.content-testimonial .image::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(50% - 4.15rem);
  left: -1.2rem;
  width: 3.1rem;
  height: 8.3rem;
  background-image: url(../images/icon-circlepart-blue.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.content-testimonial .image img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
  object-position: center;
}

.content-testimonial .name-wrapper {
  flex: 1 1 auto;
  line-height: 1.4;
}

.content-testimonial .container > .name-wrapper {
  padding-left: 5rem;
}

/* 7. LOGOS */
.content-logos {
  overflow: hidden;
}

.content-logos .container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 6rem;
}

.content-logos .content-wrapper {
  padding-top: 5rem;
}

.content-logos .mobile {
  display: none;
}

.content-logos .tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(min-content, max-content);
  grid-gap: 2rem;
}

.content-logos .swiper {
  width: 100%;
  overflow: visible;
}

.content-logos .tile,
.content-logos .swiper-slide {
  height: 14rem;
  border: 0.1rem solid #eee;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.content-logos .image {
  width: 15rem;
  height: 6rem;
  padding: 0 1rem;
}

.content-logos .image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  transition: 0.4s;
}

.content-logos .tile:hover .image img {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}

/* 8. LARGE IMAGE */
.content-large-image h2 {
  text-align: center;
}

.content-large-image .image {
  margin-top: 4rem;
}

.content-large-image .image img {
  width: 100%;
}

/* 9. CTA */
.content-cta .container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 6rem;
}

.content-cta .content-wrapper {
  padding-top: 5rem;
}

.content-cta .image {
  text-align: center;
}

.content-cta .image img {
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
}

/* 10. VACANCIES */
.content-vacancies .tiles {
  margin-top: 2rem;
}

.content-vacancies .tiles a {
  display: block;
  color: inherit;
  text-decoration: inherit;
}

.content-vacancies .tiles a:not(:last-child) {
  margin-bottom: 1rem;
}

.content-vacancies .tile {
  padding: 1.5rem 5rem;
  border: 0.1rem solid #ddd;
  border-radius: 1.3rem;
  display: flex;
  align-items: center;
  gap: 4rem;
}

.content-vacancies .image {
  flex: 0 0 7.4rem;
  display: flex;
}

.content-vacancies .image img {
  width: 100%;
}

.content-vacancies .content-wrapper {
  flex: 1 1 auto;
}

.content-vacancies h3 {
  margin: 0;
  font-size: 2.4rem;
  line-height: 1.3;
  color: var(--color-blue);
}

.content-vacancies .tiles a:hover h3 {
  text-decoration: underline;
}

/* 11. SPEAKERS */
.content-speakers h2 {
  color: var(--color-blue);
}

.content-speakers .tiles {
  margin-top: 4rem;
}

.content-speakers .tile {
  display: flex;
  gap: 4rem;
}

.content-speakers .tile:not(:last-child) {
  margin-bottom: 4rem;
  padding-bottom: 4rem;
  border-bottom: 0.1rem solid #ddd;
}

.content-speakers .image-wrapper {
  flex: 0 0 18rem;
}

.content-speakers .image {
  position: relative;
  width: 16.3rem;
  height: 16.3rem;
  margin-left: 1.7rem;
}

.content-speakers .image::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(50% - 6.2rem);
  left: -1.7rem;
  width: 4.6rem;
  height: 12.4rem;
  background-image: url(../images/icon-circlepart-blue.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.content-speakers .image img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
  object-position: center;
}

.content-speakers .content-wrapper {
  flex: 1 1 auto;
  padding-top: 2rem;
}

.content-speakers .name,
.content-speakers .position {
  line-height: 1.4;
}

.content-speakers .name {
  font-weight: 700;
}

.content-speakers .position {
  color: var(--color-blue);
}

.content-speakers .text {
  margin-top: 1rem;
  font-size: 1.6rem;
}

/* 12. VIDEO & TEXT */
.content-video.text .container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  grid-gap: 6rem;
}

.content-video.text .container.flip-yes .video-wrapper {
  order: 2;
}

.content-video .video-wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  border-radius: 1.3rem;
  overflow: hidden;
}

.content-video .video-wrapper.ratio-916 {
  width: 30rem;
  margin: 0 auto;
  padding-top: calc(calc(30rem / 9) * 16);
}

.content-video .thumbnail {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.content-video .thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}

.content-video .thumbnail::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: calc(50% - 4.5rem);
  left: calc(50% - 4.5rem);
  width: 9rem;
  height: 9rem;
  background-image: url(../images/icon-play-white.svg);
  background-size: contain;
  background-repeat: no-repeat;
}

.content-video iframe,
.content-video object,
.content-video embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.content-video.text .container.flip-yes .content-wrapper {
  order: 1;
}

.content-video .label {
  padding-top: 3rem;
}

/* 13. LINKEDIN */
.content-linkedin a {
  color: inherit;
  text-decoration: inherit;
}

.content-linkedin .tile {
  display: flex;
}

.content-linkedin .image {
  position: relative;
  padding: 1.5rem 7.5rem;
  border-radius: 1.3rem 0 0 1.3rem;
  background-color: var(--color-red);
  display: flex;
  justify-content: center;
}

.content-linkedin .image.linkedin-blue {
  background-color: var(--color-blue);
}

.content-linkedin .image::before {
  content: "\f0e1";
  position: absolute;
  z-index: 1;
  top: calc(50% - 3rem);
  right: -3rem;
  width: 6rem;
  height: 6rem;
  border-radius: 0.6rem;
  background-color: white;
  font-family: "Font Awesome 5 Brands";
  font-size: 3rem;
  line-height: 6rem;
  text-align: center;
}

.content-linkedin .image img {
  width: 10rem;
  height: 11rem;
  object-fit: contain;
  object-position: center;
}

.content-linkedin .content-wrapper {
  padding: 1.5rem 5rem 1.5rem 7.5rem;
  border-radius: 0 1.3rem 1.3rem 0;
  background-color: var(--color-black);
  display: flex;
  align-items: center;
  gap: 5rem;
}

.content-linkedin .text {
  font-family: "Mont";
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
  color: white;
  text-align: center;
}

/* 14. TEXT FRAME */
.content-text-frame .container {
  padding: 4rem;
  border: 0.1rem solid var(--color-blue);
  border-radius: 1.3rem;
}

/* 15. CONTACT */
.content-contact .container {
  display: flex;
  gap: 7rem;
}

.content-contact .image-wrapper {
  flex: 0 0 26rem;
}

.content-contact .image {
  position: relative;
  width: 23.5rem;
  height: 23.5rem;
  margin-left: 2.5rem;
}

.content-contact .image::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(50% - 9rem);
  left: -2.5rem;
  width: 6.7rem;
  height: 18rem;
  background-image: url(../images/icon-circlepart-blue.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.content-contact .image img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
  object-position: center;
}

.content-contact .content-wrapper {
  flex: 1 1 auto;
  padding-top: 7rem;
}

.content-contact .text-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 5rem;
}

/* 16. TEXT 2 COLUMNS */
.content-text-2-columns .container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 5rem;
}

/* 17. LOCATIONS */
.content-locations .container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 6rem;
}

.content-locations .locations {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 4rem;
}

.content-locations .location .image {
  width: 100%;
  height: 0;
  margin-bottom: 3rem;
  padding-top: 60%;
  border-radius: 1.3rem;
  background-size: cover;
  background-position: center;
}

.content-locations .location h3 {
  font-size: 2.6rem;
  color: var(--color-blue);
}

.content-locations .location h3.mobile {
  display: none;
}

.content-locations .location h3.desktop {
  margin-bottom: 0.5rem;
}

.content-locations .content-wrapper {
  padding: 4rem;
  border: 0.1rem solid var(--color-blue);
  border-radius: 1.3rem;
}

/* 18. TEXT BLACK */
.content-text-black .container {
  padding: 3rem;
  border-radius: 1.3rem;
  background-color: var(--color-black);
}

/* 19. TABLE */
.content-table tr:nth-child(odd) {
  background-color: var(--color-lightgrey);
}

.content-table td {
  padding: 1rem 3rem;
  vertical-align: top;
  font-size: 1.6rem;
}

.content-table td:first-child {
  font-weight: 700;
}

.content-table .link-wrapper {
  margin-top: 2rem;
}

/* 20. MAP */
.content-map .row-lg h2 {
  margin-bottom: 5rem;
  text-align: center;
}

.content-map .row-xl img {
  width: 100%;
  height: auto;
}

/* 21. SLOGAN */
.content-slogan {
  background-color: var(--color-black);
}

.content-slogan a {
  color: white;
}

.content-slogan .container {
  padding: 2rem 0;
  font-family: "Mont";
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.1;
  color: white;
  text-align: center;
}

/* 22. CTA (PERSONAL) */
.content-cta-personal .container {
  padding: 5rem;
  border-radius: 1.3rem;
  background-color: var(--color-black);
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-gap: 3rem;
  align-items: center;
}

/* 22.1 Employee wrapper */
.content-cta-personal .employee-wrapper {
  margin-top: 3rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}

.content-cta-personal .image-wrapper {
  flex: 0 0 12rem;
}

.content-cta-personal .image {
  position: relative;
  width: 10.8rem;
  height: 10.8rem;
  margin-left: 1.2rem;
}

.content-cta-personal .image::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(50% - 4.15rem);
  left: -1.2rem;
  width: 3.1rem;
  height: 8.3rem;
  background-image: url(../images/icon-circlepart-blue.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

.content-cta-personal .image img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: contain;
  object-position: center;
}

.content-cta-personal .name-wrapper {
  flex: 1 1 auto;
  line-height: 1.4;
}

.content-cta-personal .name {
  font-weight: 700;
  color: var(--color-blue);
}

/* 22.2 Link wrapper */
.content-cta-personal .link-wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
}

.content-cta-personal .arrow {
  width: 10.6rem;
  height: 10.6rem;
  margin-bottom: 4rem;
  background-image: url(../images/icon-arrow-down-blue.svg);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* 23. TEXT */
.content-text img {
  width: 100%;
  height: auto;
}

/* 24. CASES */
.content-cases h2 {
  text-align: center;
}

.content-cases .tabs-wrapper {
  margin-top: 2rem;
}

.content-cases .tabs-header {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 2rem;
}

.content-cases button {
  border: 0;
  background-color: inherit;
  font-family: "Roboto", sans-serif;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-black);
  cursor: pointer;
}

.content-cases button.active {
  color: var(--color-blue);
}

.content-cases .tabs-body {
  margin-top: 3rem;
}

.content-cases .tab-panel {
  grid-template-columns: 1fr 1fr;
  border-radius: 1.3rem;
  background-color: white;
  box-shadow: 0.1rem 0.1rem 1rem rgba(0, 0, 0, 0.16);
  color: inherit;
  text-decoration: inherit;
  overflow: hidden;
  display: none;
}

.content-cases .tab-panel.active {
  display: grid;
}

.content-cases .image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.content-cases .image-wrapper img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  object-position: center;
}

.content-cases .content-wrapper {
  padding: 5rem;
}

.content-cases h3 {
  font-size: 3.6rem;
  color: var(--color-blue);
}

.content-cases .excerpt,
.content-cases .content-wrapper p {
  margin-bottom: 2rem;
}

.content-cases .link-title {
  display: inline-block;
  font-size: 1.8rem;
  color: var(--color-black);
  text-decoration: underline;
}

/* ?. RESIZE */
@media (max-width: 1339px) {
}

@media (max-width: 1199px) {
  /* 2. ICONS */
  .content-icons .content-wrapper {
    padding: 7rem 6rem 0 0;
  }

  /* 3. ROUND IMAGE */
  .content-round-image .image-wrapper {
    padding: 0 6rem 0 6rem;
  }
}

@media (max-width: 1024px) {
  /* 2. ICONS */
  .content-icons .container {
    grid-template-columns: 1fr;
    grid-gap: 5rem;
  }

  .content-icons .content-wrapper {
    padding: 0;
  }

  .content-icons .icons-wrapper {
    width: calc(100% + 4rem);
    margin: 0 -2rem;
    padding: 4rem 2rem;
    border-radius: 0;
    grid-gap: 1rem;
  }

  .content-icons .icons-wrapper::before {
    top: -2.1rem;
    left: 2rem;
    border-width: 0 2.1rem 2.1rem 2.1rem;
    border-color: transparent transparent var(--color-lightgrey) transparent;
  }

  .content-icons .title {
    font-size: 1.4rem;
  }

  /* 3. ROUND IMAGE */
  .content-round-image .container {
    grid-template-columns: 1fr;
  }

  .content-round-image .image-wrapper {
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
    padding: 0 3rem;
  }

  .content-round-image .image::before {
    left: -3rem;
  }

  .content-round-image .content-wrapper {
    padding-top: 0;
  }

  /* 4. IMAGE & IMAGES */
  .content-image .container,
  .content-image .container.divide-33-67,
  .content-image .container.divide-33-67.flip-yes {
    grid-template-columns: 1fr;
  }

  .content-image .container {
    grid-gap: 2rem;
  }

  .content-image .container.flip-yes .image-wrapper {
    order: 1;
  }

  .content-image .container.flip-yes .content-wrapper {
    order: 2;
  }

  .content-image .label {
    padding-top: 0;
  }

  /* 7. LOGOS */
  .content-logos .container {
    display: block;
  }

  .content-logos .content-wrapper {
    padding-top: 0;
  }

  .content-logos .swiper {
    margin-top: 5rem;
  }

  .content-logos .desktop {
    display: none;
  }

  .content-logos .mobile {
    display: block;
  }

  /* 9. CTA */
  .content-cta .container {
    grid-template-columns: 1fr;
    grid-gap: 0;
  }

  .content-cta .content-wrapper {
    padding-top: 0;
    order: 2;
  }

  .content-cta .image {
    order: 1;
  }

  /* 12. VIDEO & TEXT */
  .content-video.text .container {
    grid-template-columns: 1fr;
    grid-gap: 2rem;
  }

  .content-video.text .container.flip-yes {
    grid-gap: 3rem;
  }

  .content-video .label {
    padding-top: 0;
  }

  /* 16. TEXT 2 COLUMNS */
  .content-text-2-columns .container {
    grid-template-columns: 1fr;
    grid-gap: 6rem;
  }

  /* 17. LOCATIONS */
  .content-locations .container {
    grid-template-columns: 1fr;
    grid-gap: 4rem;
  }

  .content-locations .locations {
    grid-template-columns: 1fr;
  }

  .content-locations .location .image {
    padding-top: 63%;
  }

  .content-locations .location h3.mobile {
    display: block;
  }

  .content-locations .location h3.desktop {
    display: none;
  }

  /* 18. TEXT BLACK */
  .content-text-black .container {
    padding: 3rem 2rem;
  }

  /* 19. TABLE */
  .content-table td {
    padding: 1rem;
    font-size: 1.5rem;
  }

  /* 20. MAP */
  .content-map {
    display: none;
  }

  /* 24. CASES */
  .content-cases h3 {
    font-size: 3rem;
  }
}

@media (max-width: 899px) {
  /* 24. CASES */
  .content-cases .tab-panel {
    grid-template-columns: 1fr;
  }

  .content-cases .tabs-wrapper {
    margin-top: 1.5rem;
  }

  .content-cases .tabs-header {
    gap: 0.5rem 1rem;
  }

  .content-cases button {
    font-size: 1.6rem;
  }

  .content-cases .image-wrapper {
    height: 0;
    padding-top: 71%;
  }

  .content-cases .content-wrapper {
    padding: 2.5rem;
    font-size: 1.5rem;
  }

  .content-cases h3 {
    margin-bottom: 1rem;
    font-size: 2rem;
  }

  .content-cases .link-title {
    margin-top: 1rem;
    font-size: 1.5rem;
  }
}

@media (max-width: 767px) {
  /* 4. IMAGE & IMAGES */
  .content-images .container {
    grid-template-columns: 1fr;
  }

  .content-images .container {
    grid-gap: 2rem;
  }

  /* 5. FAQ */
  .content-faq .tiles {
    margin-top: 3rem;
  }

  .content-faq .tile {
    padding: 2.5rem 2rem;
    background-size: 1rem 1rem;
    background-position: calc(100% - 2rem) 3rem;
  }

  .content-faq .tile.active {
    background-position: calc(100% - 2rem) 3rem;
  }

  .content-faq .title {
    font-size: 1.6rem;
  }

  /* 6. TESTIMONIAL */
  .content-testimonial .text {
    margin-bottom: 2rem;
    padding: 3rem 2rem;
    font-size: 1.8rem;
    line-height: 1.6;
  }

  .content-testimonial .text::before {
    left: 2rem;
  }

  .content-testimonial .reviewer-wrapper {
    gap: 1rem;
  }

  .content-testimonial .image-wrapper {
    flex: 0 0 8.9rem;
  }

  .content-testimonial .image {
    width: 8rem;
    height: 8rem;
    margin-left: 0.9rem;
  }

  .content-testimonial .image::before {
    top: calc(50% - 3.05rem);
    left: -0.9rem;
    width: 2.3rem;
    height: 6.1rem;
  }

  .content-testimonial .name-wrapper {
    line-height: 1.5;
  }

  .content-testimonial .container > .name-wrapper {
    padding-left: 2rem;
  }

  /* 7. LOGOS */
  .content-logos .image img {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
  }

  /* 8. LARGE IMAGE */
  .content-large-image .image {
    margin-top: 3rem;
  }

  /* 10. VACANCIES */
  .content-vacancies .tiles {
    margin-top: 1rem;
  }

  .content-vacancies .tile {
    padding: 1.5rem 2rem;
    gap: 0;
  }

  .content-vacancies .image {
    display: none;
  }

  .content-vacancies h3 {
    font-size: 2rem;
  }

  /* 11. SPEAKERS */
  .content-speakers .tiles {
    margin-top: 3rem;
  }

  .content-speakers .tile {
    display: block;
  }

  .content-speakers .tile:not(:last-child) {
    margin-bottom: 3rem;
    padding-bottom: 3rem;
  }

  .content-speakers .image-wrapper {
    width: 100%;
    max-width: 18rem;
  }

  /* 13. LINKEDIN */
  .content-linkedin .tile {
    display: block;
  }

  .content-linkedin .image {
    border-radius: 1.3rem 1.3rem 0 0;
  }

  .content-linkedin .image::before {
    top: inherit;
    right: inherit;
    bottom: -1.5rem;
    left: 2rem;
    width: 3rem;
    height: 3rem;
    font-size: 2rem;
    line-height: 3rem;
  }

  .content-linkedin .image img {
    display: none;
  }

  .content-linkedin .content-wrapper {
    padding: 2.5rem 5rem;
    border-radius: 0 0 1.3rem 1.3rem;
    justify-content: center;
  }

  .content-linkedin .logo img {
    width: 100%;
  }

  /* 14. TEXT FRAME */
  .content-text-frame .container {
    padding: 3rem 2rem;
  }

  /* 15. CONTACT */
  .content-contact .container {
    display: block;
  }

  .content-contact .image-wrapper {
    width: 100%;
    max-width: 24rem;
  }

  .content-contact .image {
    width: 21.7rem;
    height: 21.7rem;
    margin-left: 2.3rem;
  }

  .content-contact .image::before {
    top: calc(50% - 8.3rem);
    left: -2.3rem;
    width: 6.2rem;
    height: 16.6rem;
  }

  .content-contact .content-wrapper {
    padding-top: 3rem;
  }

  .content-contact .text-wrapper {
    grid-template-columns: 1fr;
    grid-gap: 0;
  }

  /* 17. LOCATIONS */
  .content-locations .location h3 {
    font-size: 2.2rem;
  }

  .content-locations .content-wrapper {
    padding: 3rem 2rem;
  }

  .content-locations .location .image {
    margin-bottom: 2rem;
  }

  /* 21. SLOGAN */
  .content-slogan .container {
    font-size: 2.2rem;
  }

  /* 22. CTA (PERSONAL) */
  .content-cta-personal .container {
    padding: 4rem 2rem;
    grid-template-columns: 1fr;
  }

  /* 22.1 Employee wrapper */
  .content-cta-personal .employee-wrapper {
    margin-top: 2rem;
  }

  .content-cta-personal .image-wrapper {
    flex: 0 0 10rem;
  }

  .content-cta-personal .image {
    width: 9rem;
    height: 9rem;
    margin-left: 1rem;
  }

  .content-cta-personal .image::before {
    top: calc(50% - 3.45rem);
    left: -1rem;
    width: 2.6rem;
    height: 6.9rem;
  }

  .content-cta-personal .name-wrapper {
    line-height: 1.5;
  }

  /* 22.2 Link wrapper */
  .content-cta-personal .btn {
    width: 100%;
  }
}