/* ==========================================================================
	Experience Card
============================================================================= */
.experience-cards__card {
  color: var(--color);
  background-color: var(--background-color);
  border-radius: 3px;
  border-radius: 0.1875rem;
  container-name: --card;
  container-type: inline-size;
  overflow: hidden;
}
@media (min-width:61.25rem) {
  .experience__panel-layout--right .experience-cards__card {
    scale: -1 1;
  }
}

.experience-cards__card--blue {
  --background-color: #9dcee6;
  --color: #001835;
  --description-color: rgba(0, 24, 53, 0.7);
  --link-color: #001835;
  --link-underline-color: #e8b720;
  --link-hover-color: #001835;
}

.experience-cards__card--navy {
  --background-color: #001835;
  --color: #fff;
  --description-color: rgba(255, 255, 255, 0.7);
  --link-color: #fff;
  --link-underline-color: #e8b720;
  --link-hover-color: #001835;
}

.experience-cards__card--gold {
  --background-color: #e8b720;
  --color: #001835;
  --description-color: rgba(0, 24, 53, 0.7);
  --link-color: #001835;
  --link-underline-color: #001835;
  --link-hover-color: #fff;
}

.experience-cards__card-inner {
  display: grid;
  gap: clamp(10px, -90px + 20cqi, 20px);
  gap: clamp(0.625rem, -5.625rem + 20cqi, 1.25rem);
  grid-template-columns: 100%;
  padding: clamp(16px, -124px + 28cqi, 30px);
  padding: clamp(1rem, -7.75rem + 28cqi, 1.875rem);
}

.experience-cards__card-content {
  display: grid;
  gap: 10px;
  gap: 0.625rem;
  grid-template-columns: 100%;
}

.experience-cards__card-group {
  display: grid;
  gap: 10px;
  gap: 0.625rem;
  grid-template-columns: 100%;
}

.experience-cards__card-title {
  font-size: clamp(18px, -122px + 28cqi, 32px);
  font-size: clamp(1.125rem, -7.625rem + 28cqi, 2rem);
  font-weight: 700;
  line-height: 1.3;
}

.experience-cards__card-description {
  color: var(--description-color);
  font-size: clamp(14px, -6px + 4cqi, 16px);
  font-size: clamp(0.875rem, -0.375rem + 4cqi, 1rem);
}

.experience-cards__card-actions :where(.button-text) {
  --color: var(--link-color);
  --underline-color: var(--link-underline-color);
}
.experience-cards__card-actions :where(.button-text):focus-visible {
  --color: var(--link-hover-color);
}
@media (hover: hover) {
  .experience-cards__card-actions :where(.button-text):hover {
    --color: var(--link-hover-color);
  }
}
.experience-cards__card-actions :where(.button-text) .icon {
  color: var(--link-color);
}
/*# sourceMappingURL=experience-card.css.map */