.card {
  position: relative;
  display: flex;
  border-radius: var(--card-border-radius);
  border: 1px solid transparent;
  box-shadow: var(--card-box-shadow);
  overflow: hidden;
  &.rounded-none {
    border-radius: 0;
  }
  &.border {
    border-color: $border-color;
  }
  &.border-b {
    border-bottom: 1px solid var(--default-border-color);
  }
  &.hover\:-translate-y-md {
    transition: all $transition-speed linear;
  }

  &-view {
    display: flex;
    flex-direction: column;
    padding: 3.2rem;
    background-color: $white;
  }

  &-video {
    padding-bottom: 52%;
    &__image-container {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    }
  }

  &__image-container {
    img {
      display: block;
    }
  }

  &__content-container {
    flex: 1;
  }

  &__content-hide {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-radius: var(--card-border-radius);
    background-color: $white;
    opacity: 0;
    margin: 3.2rem;
    color: $black-600;
    overflow: hidden;
    overflow-y: auto;
    transition: all $transition-speed;
  }

  &__media-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 21rem;
    box-sizing: border-box;
    padding: 2.4rem 3.2rem;
    p {
      margin-top: 0;
    }
  }

  &-download__button {
    display: block;
    background-color: $gray;
    font-size: 1.8rem;
    color: $black;
    padding: 1rem 0;
    text-align: center;
    i {
      color: inherit;
      font-size: inherit;
    }

    &:hover {
      background-color: $blue;
      color: $white;
    }
  }

  &.bg-none {
    --card-box-shadow: none;
    --card-hover-box-shadow: none;
  }

  &-partner {
    &__title-container {
      position: relative;
      display: flex;
      align-items: center;
      gap: 10px;
      padding-bottom: 16px;
      border-bottom: 1px solid #2c2c2c66;
      &::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background-color: #3d3fea;
        width: 24px;
        transition: width 1.2s ease;
      }
    }
    &:hover {
      .card-partner__title-container:after {
        width: 100%;
      }
    }
  }
}

a.card:hover {
  box-shadow: var(--card-hover-box-shadow);

  .card__content-hide {
    opacity: 1;
  }
}