.ai-cards {
   padding: 80px 0;
   font-family: 'Montserrat', sans-serif;
}

.ai-cards * {
   font-family: 'Montserrat', sans-serif;
}

.ai-cards-wrapper {
   width: 1320px;
   max-width: 100%;
   padding-left: 20px;
   padding-right: 20px;
   margin-left: auto;
   margin-right: auto;
}

.ai-cards-title {
   color: #FFF;
   text-align: center;
   font-size: 32px;
   font-style: normal;
   font-weight: 700;
   line-height: 120%;
   margin-bottom: 16px;
}

.ai-cards-title strong {
   background: linear-gradient(180deg, #9567FF 0%, #DE8BFF 100%);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.ai-cards-text-after-title {
   color: #FFF;
   text-align: center;
   font-size: 16px;
   font-style: normal;
   font-weight: 500;
   line-height: 150%;
   width: 800px;
   max-width: 100%;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 40px;
}

.ai-cards-list {
   display: flex;
   flex-wrap: wrap;
   gap: 32px;
}

.ai-cards-item {
   width: calc(33.33% - 64px / 3);
   border-radius: 16px;
   display: flex;
   flex-direction: column;
   padding: 2px;
   background: linear-gradient(0deg, #6E6F78 0%, #3D3E4A 100%);
}

.ai-cards-item-content {
   width: 100%;
   padding: 24px;
   border-radius: 14px;
   display: flex;
   flex-grow: 2;
   flex-direction: column;
   background: #30313E;
}

.ai-cards-item-box {
   flex-grow: 2;
}

.ai-cards-item-top {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 16px;
   margin-bottom: 16px;
}

.ai-cards-item-top-left {
   background: linear-gradient(180deg, #9567FF 0%, #DE8BFF 100%);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   font-size: 20px;
   font-style: normal;
   font-weight: 700;
   line-height: 130%;
}

.ai-cards-item-top-category {
   color: #FFF;
   text-align: center;
   font-size: 14px;
   font-style: normal;
   font-weight: 500;
   line-height: 140%;
   border-radius: 99px;
   background: rgba(255, 255, 255, 0.06);
   padding: 8px 16px;
}

.ai-cards-item-desc {
   color: #F6F6FC;
   font-size: 16px;
   font-style: normal;
   font-weight: 500;
   line-height: 150%;
   margin-bottom: 24px;
}

.ai-cards-item-box {
   padding-bottom: 24px;
   margin-bottom: 24px;
   border-bottom: 2px solid #9567FF;
}

.ai-cards-item-btn {
   display: flex;
   align-items: center;
   color: #FFF;
   text-align: center;
   font-size: 16px;
   font-style: normal;
   font-weight: 700;
   line-height: 120%;
}

.ai-cards-item-btn:after {
   content: '';
   display: block;
   width: 24px;
   height: 24px;
   min-width: 24px;
   margin-left: 8px;
   background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjUiIHZpZXdCb3g9IjAgMCAyNCAyNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPG1hc2sgaWQ9Im1hc2swXzUzNTBfMjg0OSIgc3R5bGU9Im1hc2stdHlwZTphbHBoYSIgbWFza1VuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iMCIgeT0iMCIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI1Ij4KPHJlY3QgeD0iMjQiIHk9IjI0Ljc5NTQiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdHJhbnNmb3JtPSJyb3RhdGUoMTgwIDI0IDI0Ljc5NTQpIiBmaWxsPSIjRDlEOUQ5Ii8+CjwvbWFzaz4KPGcgbWFzaz0idXJsKCNtYXNrMF81MzUwXzI4NDkpIj4KPHBhdGggZD0iTTE2LjE1MDEgMTEuNzk1NEwxMy4zMDAxIDguOTQ1NEMxMy4xMDAxIDguNzQ1NCAxMy4wMDQzIDguNTEyMDcgMTMuMDEyNiA4LjI0NTRDMTMuMDIwOSA3Ljk3ODczIDEzLjExNjggNy43NDU0IDEzLjMwMDEgNy41NDU0QzEzLjUwMDEgNy4zNDU0IDEzLjczNzYgNy4yNDEyMyAxNC4wMTI2IDcuMjMyOUMxNC4yODc2IDcuMjI0NTcgMTQuNTI1MSA3LjMyMDQgMTQuNzI1MSA3LjUyMDRMMTkuMzAwMSAxMi4wOTU0QzE5LjUwMDEgMTIuMjk1NCAxOS42MDAxIDEyLjUyODcgMTkuNjAwMSAxMi43OTU0QzE5LjYwMDEgMTMuMDYyMSAxOS41MDAxIDEzLjI5NTQgMTkuMzAwMSAxMy40OTU0TDE0LjcyNTEgMTguMDcwNEMxNC41MjUxIDE4LjI3MDQgMTQuMjg3NiAxOC4zNjYyIDE0LjAxMjYgMTguMzU3OUMxMy43Mzc2IDE4LjM0OTYgMTMuNTAwMSAxOC4yNDU0IDEzLjMwMDEgMTguMDQ1NEMxMy4xMTY4IDE3Ljg0NTQgMTMuMDIwOSAxNy42MTIxIDEzLjAxMjYgMTcuMzQ1NEMxMy4wMDQzIDE3LjA3ODcgMTMuMTAwMSAxNi44NDU0IDEzLjMwMDEgMTYuNjQ1NEwxNi4xNTAxIDEzLjc5NTRMNS4wMDAxIDEzLjc5NTRDNC43MTY3NiAxMy43OTU0IDQuNDc5MjYgMTMuNjk5NiA0LjI4NzYgMTMuNTA3OUM0LjA5NTkzIDEzLjMxNjIgNC4wMDAxIDEzLjA3ODcgNC4wMDAxIDEyLjc5NTRDNC4wMDAxIDEyLjUxMjEgNC4wOTU5MyAxMi4yNzQ2IDQuMjg3NiAxMi4wODI5QzQuNDc5MjYgMTEuODkxMiA0LjcxNjc2IDExLjc5NTQgNS4wMDAxIDExLjc5NTRMMTYuMTUwMSAxMS43OTU0WiIgZmlsbD0id2hpdGUiLz4KPC9nPgo8L3N2Zz4K");
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
}

.ai-cards-item-image {
   display: block;
   width: 100%;
   height: 200px;
}

.ai-cards-item-image img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}

.icon-stars {
   display: inline-block;
   width: 40px;
   min-width: 40px;
   height: 40px;
   position: relative;
   top: 7px;
   margin-left: 4px;
   background-image: url('./images/stars.png');
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
}

@media screen and (min-width: 992px) {
   .ai-cards-item:hover {
      background: linear-gradient(0deg, #DE8BFF 0%, #9467FF 100%);
   }
}

@media screen and (max-width: 992px) {
   .ai-cards-wrapper {
      padding-left: 16px;
      padding-right: 16px;
   }
   
   .ai-cards {
      padding: 60px 0;
   }

   .ai-cards-list {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 600px;
      max-width: 100%;
      gap: 24px;
      margin-left: auto;
      margin-right: auto;
   }

   .ai-cards-item {
      width: 100%;
   }

   .ai-cards-item-image {
      height: initial;
   }
}