.cards {
  display: block;
  /*grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-md);*/
}

.card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--space-lg);
  background: var(--color-secondary);
  border: 1px solid var(--color-secondary);
  padding: var(--space-md);
  margin: var(--space-md);
  margin-left: 0;
  margin-right: 0;
  border-radius: var(--radius-sm);
  align-items: center;
  &:hover {
    background: var(--color-bg-section);
    border: 1px solid var(--color-secondary);
    /*box-shadow: 0 5px 18px rgba(150, 148, 148, 0.15);*/
  }
  .foto {
    width: 200px;
    height: auto;
    img {
        width: 200px;
        height: 300px;
        border-radius: var(--radius-sm);
    }
  }
  .resumen {
    font-size: 14px;
    padding: var(--space-sm) 0;
    a {
        color: var(--color-primary);
        transition: all 0.15s linear;
        &:hover {
            color: var(--color-text);
        }
    }
  }
}

.card-foto {
  display: block;
  background: var(--color-secondary);
  margin: var(--space-md);
  margin-left: 0;
  margin-right: 0;
  border-radius: var(--radius-sm);
  align-items: center;
  position: relative;
  .foto {
    width: 100%;
    height: auto;
    img {
      width: 552px;
      height: 368px;
      display: block;
      border-radius: var(--radius-sm);
    }
  }
  .content {
      background: linear-gradient(0deg,rgba(0, 0, 0, 0.7) 20%, rgba(0, 0, 0, 0) 100%);
      position: absolute;
      bottom: 0;
      padding: var(--space-md);
      padding-top: 52px;
      width: 100%;
      .title {
       text-shadow: 0px 0px 10px var(--color-bg);
      }
      .resumen {
        display: none;
      }
    }
}

.card-sidebar {
  display: block;
  background: var(--color-secondary);
  border: 1px solid var(--color-secondary);
  padding: var(--space-md) var(--space-sm);
  margin: var(--space-md);
  margin-left: 0;
  margin-right: 0;
  border-radius: var(--radius-sm);
  align-items: center;
  transition: all 0.15s linear;
  &:hover {
    background: var(--color-bg-section);
    border: 1px solid var(--color-secondary);
    /*box-shadow: 0 5px 18px rgba(150, 148, 148, 0.15);*/
  }
}