/*
	Abstracts are helpers, variables and functions
	for scss compliation.
*/
/*
	@TODO: Add to theme: new division fix for updated sass package.
*/
/**==================================================================================================================================
BREAKPOINT
@TODO: remove? What is use case?? either use simple global points or write custom line. why does first breakpoint have to be 0?
 ==================================================================================================================================*/
/**==================================================================================================================================
BREAKPOINT ENDS
==================================================================================================================================*/
span.edit-link {
  display: inline-block;
  background-color: yellow;
  font-weight: 700;
  position: fixed;
  left: 0;
  bottom: 3.125rem;
  transform: translateX(-45px);
  transition: all 0.4s;
}

span.edit-link a {
  display: block;
  padding: 0.9375rem;
}

span.edit-link:hover {
  transform: translateX(0);
}

/*
	Variables for compliation
	NB! Colors should be added to base/config file as css root variable.
*/
/**
 * Block section background colors.
 * Include the background options ACF fields group to use these.
 */
/*
 * makes ul/ol as a dropdown select (normaly in mobile)
 * Structure: div > title > list > li > a
*/
/*
	Variables for legacy dc plugins
*/
section.icon-info-card {
  background-color: #fff;
}

section.icon-info-card .container {
  width: 100%;
}

section.icon-info-card .container .info-icon-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 1.375rem;
}

section.icon-info-card .container .info-icon-cards .common-card-details {
  border-radius: 1.25rem;
  font-family: "TT Commons Pro", sans-serif;
}

section.icon-info-card .container .info-icon-cards .intro-card {
  background-color: #b2d9d0;
  color: #293d56;
  font-size: 2.375rem;
  line-height: 128%;
}

section.icon-info-card .container .info-icon-cards .intro-card .title {
  margin: 5.1875rem 3.875rem 3.1875rem 4.625rem;
  max-width: 19.375rem;
  font-size: 2.375rem;
}

@media screen and (max-width: 768px) {
  section.icon-info-card .container .info-icon-cards .intro-card {
    padding: 3.75rem 2.5rem 7.5rem 2.5rem;
    font-style: normal;
    font-weight: 200;
  }
  section.icon-info-card .container .info-icon-cards .intro-card .title {
    margin: 0;
    width: 0;
    line-height: 110%;
  }
}
section.icon-info-card .container .info-icon-cards .card-item {
  background: #dce6e2;
  color: #375172;
}

section.icon-info-card .container .info-icon-cards .card-item .card {
  margin: 3.25rem 3.875rem 3.1875rem 3.875rem;
  display: flex;
  flex-direction: column;
}

section.icon-info-card .container .info-icon-cards .card-item .card .icon {
  margin-bottom: 4.0625rem;
}

section.icon-info-card .container .info-icon-cards .card-item .card .icon img {
  flex-shrink: 0;
  max-width: 84px;
  aspect-ratio: 1;
}

section.icon-info-card .container .info-icon-cards .card-item .card h2.title {
  width: 15rem;
  margin-bottom: 2.75rem;
  font-size: 2.375rem;
  font-weight: 200;
  line-height: 128%;
  margin-bottom: 44px;
}

section.icon-info-card .container .info-icon-cards .card-item .card h2.title a {
  color: #375172;
  font-size: 2.375rem;
  -webkit-text-decoration-color: #375172;
          text-decoration-color: #375172;
  -webkit-text-decoration-line: underline;
          text-decoration-line: underline;
  -webkit-text-decoration-style: solid;
          text-decoration-style: solid;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
  text-decoration-thickness: 0.0625rem;
  text-underline-offset: auto;
  text-underline-position: from-font;
  transition: color 0.4s ease, -webkit-text-decoration-color 0.4s ease;
  transition: color 0.4s ease, text-decoration-color 0.4s ease;
  transition: color 0.4s ease, text-decoration-color 0.4s ease, -webkit-text-decoration-color 0.4s ease;
}

section.icon-info-card .container .info-icon-cards .card-item .card h2.title a:hover {
  color: #ad5156;
  -webkit-text-decoration-color: #ad5156;
          text-decoration-color: #ad5156;
}

section.icon-info-card .container .info-icon-cards .card-item .card p {
  flex-shrink: 0;
  font-size: 1.25rem;
  font-weight: 200;
  line-height: 128%;
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 768px) {
  section.icon-info-card .container .info-icon-cards .card-item .card {
    margin: 3.75rem 2.5rem;
  }
  section.icon-info-card .container .info-icon-cards .card-item .card .icon {
    margin-bottom: 3.75rem;
  }
  section.icon-info-card .container .info-icon-cards .card-item .card .title {
    margin-bottom: 1.875rem;
  }
}
@media screen and (max-width: 768px) {
  section.icon-info-card .container .info-icon-cards {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  }
}
@media screen and (max-width: 768px) {
  section.icon-info-card {
    margin-bottom: 5.625rem;
  }
}
@media screen and (max-width: 576px) {
  section.icon-info-card .container .info-icon-cards .intro-card {
    font-size: 2.375rem;
    padding: 1.875rem 1.875rem 3.125rem 1.875rem;
  }
  section.icon-info-card .container .info-icon-cards .card-item .card {
    margin: 1.875rem;
  }
  section.icon-info-card .container .info-icon-cards .card-item .card .icon {
    margin-bottom: 1.25rem;
  }
  section.icon-info-card .container .info-icon-cards .card-item .card .icon img {
    max-width: 70px;
  }
  section.icon-info-card .container .info-icon-cards .card-item .card h2.title {
    width: 100%;
    margin-bottom: 1.875rem;
  }
  section.icon-info-card .container .info-icon-cards .card-item .card h2.title a {
    color: #375172;
    font-size: 1.875rem;
  }
}