/**
 * Block : Illustration
 * =================================
 *
 *
 *
 */

.illustration__body {
  position: relative;
}

.illustration__image {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.illustration__image img {
  max-height: 650px;
}

@media screen and (max-width: 480px) {
  .illustration__image img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

.illustration__image::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 600px;
  height: 600px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle,
    rgba(242, 141, 39, 0.8) 0%,
    rgba(255, 255, 255, 1) 65%
  );
}

.illustration__image-border {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  flex-shrink: 0;
  background: transparent;
  border: 4px solid var(--wp--preset--color--secondary);
  z-index: 1;
  transform: translate(-50%, -50%) rotate(25deg);
  width: 250px;
  height: 250px;
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  overflow: hidden;
  animation: morph 8s linear infinite;
}

@keyframes morph {
  0%,
  100% {
    border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%;
  }
  34% {
    border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
  }
  67% {
    border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%;
  }
}

.illustration__cards-item {
  position: relative;
  width: 100%;
}

.illustration__cards-item-link {
  transition: all 200ms ease-in-out;
  text-decoration: none;
  font-family: "Mulish", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 22px;
  text-align: left;
  color: var(--wp--preset--color--primary);
  cursor: pointer;
}

@media screen and (max-width: 1200px) {
  .illustration__cards-item-text {
    font-size: 15px;
  }

  .illustration__cards-item-icon {
    max-width: 35px;
    max-height: 35px;
  }
}

@media screen and (max-width: 992px) {
  .illustration__image {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 80%;
    margin-top: 20px;
  }

  .illustration__image-border {
    width: 100%;
    height: 100%;
  }

  .illustration__image::before {
    width: 600px;
    height: 600px;
  }

  .illustration__cards-item {
    width: 480px;
  }
}

@media screen and (min-width: 992px) {
  .illustration__cards-item {
    width: calc(50% - 140px);
  }

  .illustration__image-border {
    width: 600px;
    height: 600px;
  }
}

@media screen and (max-width: 992px) {
  .illustration__image-border {
    width: 450px;
    height: 450px;
  }
}

@media screen and (min-width: 1200px) {
  .illustration__cards-item {
    width: 380px;
  }

  .illustration__cards-item:hover .illustration__cards-item-link {
    background-color: var(--wp--preset--color--primary);
    color: white;
    transform: translateX(-5px);
  }

  .illustration__cards-item#item-1:hover .illustration__cards-item-link,
  .illustration__cards-item#item-3:hover .illustration__cards-item-link,
  .illustration__cards-item#item-5:hover .illustration__cards-item-link,
  .illustration__cards-item#item-7:hover .illustration__cards-item-link {
    transform: translateX(5px);
  }
}

@media screen and (min-width: 992px) {
  .illustration__cards-item:nth-of-type(3) {
    left: -95px;
  }

  .illustration__cards-item:nth-of-type(4) {
    left: 95px;
  }

  .illustration__cards-item:nth-of-type(6) {
    left: -80px;
  }

  .illustration__cards-item:nth-of-type(7) {
    left: 80px;
  }
}

@media screen and (max-width: 1200px) {
  .illustration__image {
    margin-top: -50px;
    max-width: 450px;
  }
  .illustration__image img {
    max-width: 90%;
  }

  .illustration__cards-item {
    width: 320px;
  }

  .illustration__cards-item:nth-of-type(1),
  .illustration__cards-item:nth-of-type(8) {
    left: -60px;
  }

  .illustration__cards-item:nth-of-type(2),
  .illustration__cards-item:nth-of-type(9) {
    left: 60px;
  }
}

@media screen and (max-width: 992px) {
  .illustration__image {
    margin: 50px 0;
  }

  .illustration__cards-item {
    left: auto !important;
  }

  .illustration__cards-item {
    width: 380px;
  }

  .illustration__cards-item-text {
    font-size: 14px;
  }
}

@media screen and (max-width: 480px) {
  .illustration__cards-item {
    width: 100%;
  }

  .illustration__image::before,
  .illustration__image-border {
    width: 350px;
    height: 350px;
  }
}

.illustration__cards-item-number {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 1.125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.34);
}