/* ------------------------------ */
/* PARTNER */
/* ------------------------------ */

.partner {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: stretch;
  flex-wrap: wrap;
  column-gap: var(--sp400);
  row-gap: var(--sp200);
  margin-top: var(--sp500);
}

.partner > a {
  flex: 0 0 calc((100% - 8rem) / 2) !important;
}

.partner .tile {
  padding: 4rem;
}

.partner a:hover {
  cursor: pointer;
}

.partner .tile:active {
  opacity: 0.75;
}

.partner .tile .img {
  padding-bottom: var(--sp200);
}

.partner a {
  padding-bottom: var(--sp500);
  flex: 1 0 calc(50% - 4rem);

  color: var(--n20);
  position: relative;
  padding-bottom: 0 !important;
}

.partner a:hover:after {
  background-color: var(--n20);
  opacity: 0;
}
.partner a:hover {
  background-color: var(--n96);
  -webkit-transition: 200ms ease-in-out;
  transition: 200ms ease-out;
}

/* ------------------------------ */
/* BENEFITS */
/* ------------------------------ */

.benefits {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  column-gap: 4rem;
  flex-wrap: wrap;
  margin-top: var(--sp500);
  text-align: center;
}
.benefits .tile {
  padding-bottom: var(--sp500);
  flex: 0 0 calc(50% - 4rem);
}
.benefits .tile-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.benefits .tile-wrapper h3 {
  margin-bottom: var(--sp100);
}
.benefits .tile-wrapper p {
  text-align: center;
}

.benefits .tile-wrapper .img {
  margin-bottom: var(--sp200);
  width: 14rem;
  height: 14rem;
  border-radius: 100%;
  background-repeat: no-repeat;
  background-size: 10rem;
  background-position: center;
}

.benefits .tile-wrapper .img.ic-responsibility {
  background-image: url("../resources/ic/ic_responsibility.svg");
}
.benefits .tile-wrapper .img.ic_remote-work {
  background-image: url("../resources/ic/ic_remote-work.svg");
}
.benefits .tile-wrapper .img.ic_flexible-working-time {
  background-image: url("../resources/ic/ic_flexible-working-time.svg");
}
.benefits .tile-wrapper .img.ic_education {
  background-image: url("../resources/ic/ic_education.svg");
}

/* ------------------------------ */
/* SPRINT */
/* ------------------------------ */

.sprint-planning .year {
  width: 0rem;
  position: relative;
  transform: translateX(-3.2rem);
}
.sprint-planning .year p {
  transform-origin: 50% 100% 0;
  position: absolute;
}
.sprint-planning {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  row-gap: var(--sp400);
}
.sprint-planning .quart h3 {
  margin-bottom: var(--sp300);
}
.sprint-planning .quart ul {
  padding: 0;
}
.sprint-planning .quart ul li {
  list-style: none;
  color: var(--n60);
  margin-top: 0.6rem;
}
.sprint-planning .quart ul li span {
  width: 7rem;
  display: inline-block;
}
.sprint-planning .quart ul li.active {
  color: var(--n20) !important;
  font-weight: 600 !important;
}
.sprint-planning .quart ul li.active span {
  color: var(--n20) !important;
  font-weight: 600 !important;
}
.sprint-planning .quart ul li.past {
  text-decoration: line-through;
  opacity: 0.5;
}
.sprint-planning .quart ul li.past span {
  text-decoration: line-through;
}
.sprint-planning .quart ul li.pause p {
  color: rgba(0, 0, 0, 0);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.sprint-planning .quart ul li.pause p a {
  color: var(--n60);
  cursor: auto;
}
.sprint-planning .quart ul li.pause p a:active {
  opacity: 1;
}
.sprint-description {
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
.sprint-description p {
  text-align: right;
  color: var(--n60);
  width: 60%;
}

/* ------------------------------------------------------------ */
/* ------------------------------ */
/* RESPONSIVE */
/* ------------------------------ */
/* < 640 ------------------------------------------------------------ */
@media screen and (max-width: 640px) {
  .partner {
    flex-direction: column;
  }
  .benefits {
    flex-direction: column;
  }

  /* Sprintplanning */
  .sprint-planning .year {
    display: none;
  }
  .sprint-planning {
    flex-direction: column;
  }
  .sprint-description p {
    width: 100%;
    text-align: left;
  }
}
/* 640 ------------------------------------------------------------ */
@media (max-width: 767px) and (min-width: 640px) {
  .partner {
    flex-direction: column;
  }
  .benefits {
    flex-direction: column;
  }

  /* Sprintplanning */
  .sprint-planning .year {
    display: none;
  }
  .sprint-planning .quart {
    flex: 2 2 calc((100% - 8rem) / 2);
    width: 20%;
  }
  .sprint-description p {
    width: 100%;
    text-align: left;
  }
}
/* 768 ------------------------------------------------------------ */
@media (max-width: 1023px) and (min-width: 768px) {
  /* Sprintplanning */
  .sprint-planning .year {
    display: none;
  }
  .sprint-planning .quart {
    flex: 2 2 calc((100% - 8rem) / 2);
  }
  .sprint-description p {
    width: 80%;
  }
}
/* 1024 ------------------------------------------------------------ */
@media (max-width: 1279px) and (min-width: 1024px) {
  /* Sprintplanning */
  .sprint-planning .year {
    display: none;
  }
  .sprint-planning {
    flex-wrap: nowrap;
    column-gap: var(--sp200);
  }
  .sprint-planning .quart {
    width: 20%;
  }
}
/* 1280 ------------------------------------------------------------ */
@media (max-width: 1919px) and (min-width: 1280px) {
  /* Sprintplanning */
  .sprint-planning .year {
    width: 14rem;
  }
  .sprint-planning .year p {
    transform: rotate(-90deg);
  }
  .sprint-planning {
    flex-wrap: nowrap;
    column-gap: var(--sp200);
  }
  .sprint-planning .quart {
    width: 20%;
  }
}
/* 1440 ------------------------------------------------------------ */
@media (max-width: 1919px) and (min-width: 1440px) {
  /* Sprintplanning */
  .sprint-planning .year {
    width: 14rem;
  }
  .sprint-planning .year p {
    transform: rotate(-90deg);
  }
  .sprint-planning .quart {
    flex: 0 0 calc((100% - 8rem) / 5);
  }
}
/* 1920 ------------------------------------------------------------ */
@media (max-width: 2559px) and (min-width: 1920px) {
  /* Sprintplanning */
  .sprint-planning .year {
    width: 20rem;
  }
  .sprint-planning .year p {
    transform: rotate(-90deg);
  }
  .sprint-planning .quart {
    flex: 0 0 calc((100% - 8rem) / 5);
  }
}
/* > 2560 ------------------------------------------------------------ */
@media screen and (min-width: 2560px) {
  /* Sprintplanning */
  .sprint-planning .year {
    width: 20rem;
  }
  .sprint-planning .year p {
    transform: rotate(-90deg);
  }
  .sprint-planning .quart {
    flex: 0 0 calc((100% - 8rem) / 5);
  }
}