@import "./theme.scss";

.ai-certifications {
  width: 100vw;
  min-height: 100vh;

  .ai-certifications-top-background {
    height: 400px;
    background-color: $themeColor3;
    width: 100vw;
    position: absolute;
    left: 0;
  }

  .ai-certifications-container {
    max-width: 1000px;
    margin: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 100px 0 100px 0;
    position: relative;

    .ai-certifications-item {
      .ai-item-body {
        background-color: $themeColor2;
        width: 100%;
        border-radius: $defaultBorder;

        display: flex;
        height: 100%;
        flex-direction: column;

        .ai-item-head {
          display: flex;
          justify-content: space-between;

          .ai-item-logo {
            width: 50px;
            height: 50px;
            background-position: center;
            background-size: contain;
            border-radius: $defaultBorder;
          }

          svg {
            stroke: $themeColor4;
          }
        }

        .ai-item-title {
          margin: 30px 0px 0px;
          font-size: clamp(24px, 5vw, 28px);
          font-weight: 700;
          line-height: 1.2;
          color: $themeColor4;
        }

        .ai-item-platform {
          margin: 15px 0px 0px;
          font-size: clamp(18px, 3.7vw, 21px);
          font-weight: 600;
          line-height: 1.2;
          color: $themeColor4;
        }

        .ai-item-date {
          margin: 30px 0px 0px;
          font-size: clamp(12px, 2.5vw, 14px);
          font-weight: 600;
          line-height: 1.2;
          color: $themeColor4;
        }

        &:hover {
          .ai-item-title {
            color: $themeColor3;
          }

          .ai-item-head {
            svg {
              stroke: $themeColor3;
            }
          }
        }
      }
    }

    .ai-single-image-container {
      width: 100%;
      margin: 12px 0;
      border-radius: $defaultBorder;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: bottom;

      filter: grayscale(1);
      mix-blend-mode: multiply;
    }
  }
}

.ai-hover-color {
  position: relative;

  .ai-hover-color-filter {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: $themeColor2;
    border-radius: $defaultBorder;
    transition: $allTransitoin3s;
  }

  &:hover {
    .ai-single-image-container {
      filter: grayscale(0);
      mix-blend-mode: normal;
      transition: $allTransitoin3s;
    }
  }
}
