:root {
  --title-transition: color .3s ease-in-out;
}

.cardFeatured {
  background-color: var(--bg);
  @media (width >= 1024px) {
    display: flex;
    flex-direction: row-reverse;
    padding: .5rem;
    gap: 2rem;
  }
  .cardFeatured__image {
    --w: 100%;
    width: var(--w);
    aspect-ratio: 16 / 10;
    overflow: hidden;
    display: flex;
    margin: 0;
    border-top: 4px solid var(--primary-light-4);
    @media (width >= 1024px) {
      --w: 65%;
      border: none;
    }
    @media (width >= 1280px) {
      --w: 62%;
    }
    a {
      display: flex;
      width: 100%;
      height: 100%;
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .cardFeatured__content {
    padding: var(--mobile-pd);
    @media (width >= 1024px) {
      flex-shrink: 100;
      padding: .75rem;
    }
  }
  .cardFeatured__title {
    color: var(--black);
    font-size: var(--fs-xl);
    margin: 0 0 .5rem 0;
    @media (width <= 992px) {
      font-size: var(--fs-lg);
    }
    a {
      text-decoration: none;
      color: var(--black);
      transition: var(--title-transition);
    }
    a:hover {
      color: hsl(var(--secondary-500));
    }
  }
  .cardFeatured__excerpt {
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.4;
    font-weight: 300;
    @media (width >= 1280px) {
      font-size: var(--fs-base);
    }
  }
}

.cardSimple {
  display: flex;
  align-items: center;
  gap: .5rem;
  @media screen and (width >= 1280px) {
    flex-direction: column;
    gap: 0;
  }
  &.left{
    align-items: start;
  }
  .date{
    font-size: 13px;
  }
  .cardSimple__image {
    --w: 40%;
    width: var(--w);
    aspect-ratio: 16 / 10;
    overflow: hidden;
    display: flex;
    margin: 0;
    @media screen and (width >= 1280px) {
      --w: 100%;
      margin: 0 0 .5rem;
    }
    a {
      display: flex;
      width: 100%;
      height: 100%;
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .cardSimple__title {
    color: var(--shadow-dark-1);
    font-size: var(--fs-base);
    margin: 0;
    font-weight: 400;
    flex: 1;
    @media (width >= 640px) {
      font-size: var(--fs-lg);
    }
    @media (width >= 1024px) {
      font-size: var(--fs-base);
    }
    &.is--lg {
      @media screen and (width >= 992px) {
        font-size: var(--fs-lg);
      }
    }
    &.is--md {
      font-size: var(--fs-md);
    }
    a {
      text-decoration: none;
      color: var(--black);
      transition: var(--title-transition);
    }
    a:hover {
      color: hsl(var(--secondary-500));
    }
  }
  &.vertical {
    .cardSimple__title {
      font-size: var(--fs-md);
      font-weight: 500;
    }
  }
  .cardSimple__excerpt {
    color: var(--shadow-dark-2);
    margin: 0;
    line-height: 1.4;
    font-size: var(--fs-sm);
    font-weight: 300;
    margin-top: .5rem;
    @media (width >= 1280px) {
      font-size: var(--fs-base);
    }
  }
  &.patrocinada {
    margin-top: 1rem;
    color: var(--black);
    background: var(--bg);
    position: relative;
    gap: 1rem;
    @media (width >= 1024px) {
      padding: 1rem;
      padding-bottom: 1rem !important;
      display: flex;
      flex-direction: row;
      gap: 1rem;
      align-items: stretch;
    }
    .cardSimple__image {
      width: 40%;
      overflow: hidden;
      display: flex;
      margin: 0;
      @media (width >= 1024px) {
        width: 30%;
        aspect-ratio: unset;
        border: none;
      }
      a {
        display: flex;
        width: 100%;
        height: 100%;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .cardSimple__content {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      @media (width >= 1024px) {
        flex-shrink: 100;
        padding: .75rem;
        align-items: flex-start;
      }
    }
    .cardSimple__title {
      color: var(--black);
      margin: 0 0 .5rem 0;
      font-size: var(--fs-base);
      @media (width >= 640px) {
        font-size: var(--fs-md);
      }
      a {
        text-decoration: none;
        color: var(--black);
        transition: var(--title-transition);
      }
      a:hover {
        color: hsl(var(--secondary-500));
      }
    }
    .cardSimple__excerpt {
      display: none;
      @media screen and (width >= 1024px) {
        display: block;
      }
    }
    .cardPatrocinado__title {
      --fc: #fff;
      --bg: var(--brown);
      background-color: var(--bg);
      color: var(--fc);
      margin: 0;
      position: absolute;
      font-size: var(--fs-sm);
      right: 0;
      top: -1rem;
      padding: .15rem .5rem;
      line-height: 1;
      @media screen and (width >= 1024px) {
        --fc: var(--brown);
        position: relative;
        background-color: transparent;
        font-size: var(--fs-xs);
        top: 0;
        margin: 0 0 .5rem 0;
        padding: 0;
      }
    }
  
    
    .cardSimple__excerpt {
      color: var(--shadow-dark-2);
      margin: 0;
      line-height: 1.4;
      font-size: var(--fs-sm);
      font-weight: 300;
      @media (width >= 1280px) {
        font-size: var(--fs-base);
      }
    }
  }
}

.category{
  .cardSimple{
    &.patrocinada{
      margin-top: 0;
    }
  }
}

.cardHorizontal {
  &:not(:last-child)
  {
    padding-bottom: .8rem;
        border-bottom: 1px solid var(--shadow-light-2);
  }
  @media (width >= 1024px) {
    align-items: flex-start;
  }
  .cardHorizontal__image {
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    display: flex;
    margin: 0;
    @media (width >= 1024px) {
      width: 25%;
      border: none;
    }
    a {
      display: flex;
      width: 100%;
      height: 100%;
    }
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .cardHorizontal__content {
    @media (width >= 1024px) {
      flex-shrink: 100;
      padding: .75rem;
    }
  }
  .cardHorizontal__title {
    color: var(--black);
    margin: 0 0 .5rem 0;
    font-size: var(--fs-md);
    a {
      text-decoration: none;
      color: var(--black);
      transition: var(--title-transition);
    }
    a:hover {
      color: hsl(var(--secondary-500));
    }
  }
  .cardHorizontal__excerpt {
    color: hsl(var(--shadow-500));
    margin: 0;
    line-height: 1.4;
    font-size: var(--fs-sm);
    font-weight: 300;
    margin-top: .5rem;
    @media (width >= 1280px) {
      font-size: var(--fs-base);
    }
  }
  &.simple{
    flex-direction: row;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    @media (width >= 1024px) {
      gap: .5rem;
    }
    @media (width >= 1280px) {
      gap: 1.5rem;
    }
    .cardHorizontal__image {
      width: 40%;
      @media screen and (width >= 1024px) {
        width: 30%;
      }
    }
    .cardHorizontal__content {
      flex: 1;
      @media (width >= 1024px) {
        flex-shrink: 100;
        padding: 0rem;
      }
    }
    .cardHorizontal__title {
      color: var(--black);
      margin: 0;
      font-size: var(--fs-base);
      font-weight: 400;
      @media (width >= 640px) {
        font-size: var(--fs-lg);
      }
      @media (width >= 1024px) {
        font-size: var(--fs-base);
      }
      a {
        text-decoration: none;
        color: var(--black);
        transition: var(--title-transition);
      }
      a:hover {
        color: hsl(var(--secondary-500));
      }
    }
    .cardHorizontal__link {
      color: hsl(var(--primary-500));
      margin-top: 1rem;
    }
    .cardHorizontal__date {
      font-size: var(--fs-sm);
      color: var(--shadow-light-1);
      font-style: italic;
      display: block;
      margin: .3rem 0;
    }
  }
}
.cardHorizontal:not(.simple) {
  display: flex;
  flex-direction: row-reverse;
  gap: 1rem;
  align-items: center;
  @media (width >= 1024px) {
    flex-direction: row;
    align-items: flex-start;
  }
  .cardHorizontal__image {
    --w: 40%;
    width: var(--w);
  }
  .cardHorizontal__content {
    flex: 1;
  }
  .cardHorizontal__title {
    margin-bottom: 0;
    transition: var(--title-transition);
  }
  .cardHorizontal__title:hover {
    color: hsl(var(--secondary-500));
  }
  .cardHorizontal__excerpt {
    display: none;
    @media screen and (width >= 1024px) {
      display: block;
    }
  }
}