.component-04 {
  overflow: hidden;

  .swiper {
    overflow: visible;
  }

  .card {
    position: relative;
    color: #ffffff;

    &:before,
    &:after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
    }

    &:before {
      background-color: rgba(0, 0, 0, 0.5);
    }

    &:after {
      background-color: rgba(93, 100, 234, 0.8);
      opacity: 0;
      transition: all 0.3s;
    }

    .oj-media {
      z-index: 1;

      img {
        width: 100%;
      }
    }

    .card-content {
      padding: 2rem;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      position: relative;
      z-index: 3;
      .card-icon {
        margin-bottom: 2rem;
        i {
          display: block;
        }
      }

      .description.fulltext {
        display: none;
      }
    }

    &.active {
      &:after {
        opacity: 1;
      }
      .description.fulltext {
        display: block;
      }
    }
  }

  @media (min-width: 1200px) {
    .header {
      .title {
        font-size: var(--fs-50);
        line-height: var(--lh-50);
      }
    }

    .card {
      .title {
        font-size: var(--fs-30);
        line-height: var(--lh-30);
      }

      &:hover {
        &:after {
          opacity: 1;
        }

        .description.fulltext {
          display: block;
        }
      }
    }
  }

  @media (max-width: 1399px) {
  }

  @media (max-width: 1199px) {
    .header {
      .title {
        font-size: var(--fs-30);
        line-height: var(--lh-30);
      }
    }

    .card {
      .title {
        font-size: var(--fs-20);
        line-height: var(--lh-20);
      }
    }
  }

  @media (max-width: 991px) {
  }

  @media (min-width: 768px) {
    .card-content {
      position: absolute !important;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      .card-icon {
        position: absolute;
        top: 0;
        left: 0;
        padding: 2rem;
      }
    }
  }

  @media (max-width: 767px) {
    .swiper {
      .swiper-wrapper {
        display: block;
        transform: none !important;
        .swiper-slide:nth-child(1n + 2) {
          margin-top: 1.5rem;
        }
      }
      .swiper-pagination {
        display: none;
      }
    }

    .oj-media {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      img {
        height: 100%;
        object-fit: cover;
      }
    }
  }

  @media (max-width: 575px) {
  }
}