[data-component-id="tec_prepa:hero_article"] {
  position: relative;
  min-height: 165px;
  display: grid;
  grid-template-columns: 1fr;

  & .media.media--type-image {
    position: relative;
    height: 362px;

    & .media--blazy {
      height: 100%;
    }

    & img {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      object-fit: cover;
      background-color: #000000;
    }
  }

  & .article-title-text {
    position: relative;
    z-index: 2;
    background: #03021999;
    height: 100%;
    background: #122CDE;
    display: flex;
    flex-direction: column;
    justify-content: center;

    & .article-title-text-wrapper{
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 16px;

      & .content {
        display: flex;
        gap: 8px;
        align-items: center;
        flex-direction: column;
      }

      & h1 {
        color: #FFF;
        text-align: center;
      }

      & .category {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;

        & .minutes {
          overflow: hidden;
          color: #FFF;
          text-align: center;
          text-overflow: ellipsis;
          font-family: Poppins;
          font-size: 14px;
          font-style: normal;
          font-weight: 600;
          line-height: 16px; /* 114.286% */
          letter-spacing: 0.28px;
          text-transform: uppercase;
          display: block;
          float: left;
          margin-top: 12px;
          position: relative;
          padding-right: 8px;

          &:after {
            content: '';
            display: block;
            width: 1px;
            height: 30px;
            background-color: #FFF;
            position: absolute;
            right: 0px;
            top: 0px;
          }
        }

        & .categoria {
          padding: 4px 8px;
          border-radius: 40px;
          background: #FFF;
          color: var(--Base-Azul, #122CDE);
          font-family: "DM Sans";
          font-size: 12px;
          font-style: normal;
          font-weight: 400;
          line-height: 18px; /* 150% */
          display: block;
          float: left;
          margin-top: 8px;
          margin-left: 8px;
        }
      }
    }
  }
}

@media screen and (min-width: 1024px) {
  [data-component-id="tec_prepa:hero_article"] {
    grid-template-columns: 1fr 1fr;

    & .media.media--type-image {
      height: 100%;
    }

    & .article-title-text {
      margin-top: 0;

      & .article-title-text-wrapper {
        padding: 48px 96px;

        & .category {
          display: block;
          flex-wrap: initial;
          flex-direction: initial;
        }

        & h1 {
          text-align: left;
        }

        & .content{
          align-items: baseline;
          background: none !important;
          gap: 8px;
        }
      }
    }
  }
}