/* ======================================
   ITEM WRAPPER
====================================== */
.expertise__item-wrapper {
  position: relative;
  max-width: 100%;
  height: 100%;
  margin-bottom: 24px;
  padding: 0 24px 24px 24px;
}

/* ======================================
   BACKGROUND CARD
====================================== */
.expertise__item-wrapper::before {
  content: '';
  position: absolute;
  top: 110px;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, #EEF6FF 0%, #B6CFEB 100%);
  border-radius: 10px;
  z-index: -1;
}

/* ======================================
   TITLE
====================================== */
.expertise__item-wrapper_title > div > h3 {
  margin: 0 0 16px 0;
  font-size: 22px;
  font-weight: 700;
}

/* ======================================
   IMAGE
====================================== */
.expertise__item-wrapper_image {
  align-self: center;
}

.expertise__item-wrapper_image > div > picture > img {
  display: block;
  border-radius: 10px;
}

/* ======================================
   LINK
====================================== */
.expertise__item-wrapper_link {
  margin-top: 16px;
}


.expertise__item-wrapper_link > div > div > a {
  display: inline-block;
  width: 40px;
  height: 40px;
  background-color: var(--color-primary--1);
  border: 2px solid var(--color-primary--1); 
  border-radius: 50%; 
  background-image: url('../../../images/arrow-white.svg'); 
  background-size: 50% auto; 
  background-repeat: no-repeat;
  background-position: center;
  text-indent: -9999px;
  overflow: hidden;
  transition: background-color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
}

.expertise__item-wrapper_link > div > div > a:hover,
.expertise__item-wrapper_link > div > div > a:focus {
  background-color: var(--color-tertiary--dark);
  border-color: var(--color-tertiary--dark);
}

/* ======================================
   TABLET (768px+)
====================================== */
@media screen and (min-width: 768px) {
  .expertise__item-wrapper {
    padding: 0 48px 32px 48px;
  }

  .expertise__item-wrapper_content {
    height: 100%;
  }

  .expertise__item-wrapper_title > div > h3 {
    font-size: 27px;
  }

  .expertise__item-wrapper_link > div > div > a {
    width: 48px;
    height: 48px;
  }
}