@import url(./styles.css);

.agents-container {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.agent .card-img {
  background-color: var(--primaryBgMedium);
  height: 300px;

  align-items: start;
  padding-top: 32px;
}

.agent .card-img img {
  width: 180%;
}

.agent .card-img::before {
  content: "";
  position: absolute;
  height: 100%;
  width: 0%;
  left: -17%;
  top: 0;
  z-index: 0;

  background-color: var(--primaryBgLight);
  transform: var(--skew);
  transition: var(--transAll);
}

.agent:is(:hover, :focus) .card-img::before {
  width: 145%;
}

.agent:active .card-img::before {
  width: 145%;
}

.agent h2 {
  font-size: var(--fontSizeLarger);
}

.agent .card-info {
  font-size: var(--fontSizeSmall);
}

.agent-class-img {
  height: var(--fontSizeTiny);
  margin-right: 4px;
}

@media (max-width: 768px) {
  .agent .card-img {
    height: 200px;
  }
}