.content-item {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid #d1d5db;
  border-radius: 16px;
  overflow: hidden;
  transition: 150ms;
}
.content-item:hover {
  border: 1px solid var(--theme-color-purple-l1);
}
.content-item:hover .content-wrapper {
  background-color: var(--e-global-color-primary);
  border-color: var(--e-global-color-primary) !important;
}
.content-item:hover .content-wrapper .text-wrapper * {
  color: white !important;
}
.content-item .content-wrapper {
  padding: 1.5em;
  flex: 1;
  display: flex;
  flex-direction: column;
  background-color: white;
  transition: 150ms;
}
@media (max-width: 991.98px) {
  .content-item .content-wrapper {
    padding: 1.5em;
  }
}
@media (max-width: 767.98px) {
  .content-item .content-wrapper {
    padding: 1.25em;
  }
}
.content-item .content-wrapper > *:nth-last-child(2) {
  margin-bottom: 50px;
}
@media (max-width: 991.98px) {
  .content-item .content-wrapper > *:nth-last-child(2) {
    margin-bottom: 40px;
  }
}
@media (max-width: 767.98px) {
  .content-item .content-wrapper > *:nth-last-child(2) {
    margin-bottom: 32px;
  }
}
.content-item .content-wrapper > *:last-child:not(:only-child) {
  margin-top: auto;
  margin-bottom: 0;
}
.content-item .content-wrapper .text-wrapper {
  width: 100%;
  flex: 1;
}
.content-item .content-wrapper .text-wrapper .title {
  transition: 150ms;
}
.content-item .content-wrapper .text-wrapper .date {
  color: var(--theme-color-grayscale-secondary);
}
.content-item .content-wrapper .button {
  text-align: center;
}
.content-item .image-wrapper {
  aspect-ratio: 314/176;
  background-color: #fafafc;
}
.content-item .image-wrapper img {
  width: 100%;
  aspect-ratio: 314/176;
  object-fit: cover;
}