.card-info-medium{
  border:0.05rem solid var(--color-border);
  height:30rem;
  min-height:30rem;
  position:relative;
  width:33rem;

  @media (width >= 1024px){

    &:hover{

      .card-info-medium__content-bottom{
        grid-template-rows:1fr;
        margin-top:var(--space-md);
      }
    }
  }

  .card-info-medium__inner{
    display:flex;
    flex-direction:column;
    height:100%;
    justify-content:flex-end;
  }

  .card-info-medium__header{
    height:100%;
    left:0;
    overflow:hidden;
    position:absolute;
    top:0;
    width:100%;

    img{
      height:100%;
      -o-object-fit:cover;
      object-fit:cover;
      position:absolute;
    }
  }

  .card-info-medium__content{
    padding:var(--space-md);
    z-index:1;
  }

  .card-info-medium__content-top{
    width:100%;
  }

  .card-info-medium__content-bottom{
    display:grid;
    grid-template-rows:0fr;
    transition:var(--transition-fast);
    width:100%;
  }

  .card-info-medium__title{
    -webkit-box-orient:vertical;
    display:-webkit-box;
    -webkit-line-clamp:3;
    line-clamp:3;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .card-info-medium__button{
    align-items:center;
    -moz-column-gap:var(--space-sm);
    column-gap:var(--space-sm);
    display:flex;
    justify-content:flex-end;
    overflow:hidden;
    text-transform:lowercase;
    transition:var(--transition-fast);
    width:100%;

    @media (width >= 1024px){

      svg{
        vertical-align:middle;

        path{
          fill:var(--color-accent);
        }
      }
    }
  }
}

.theme-light .card-info-medium__content{
  background-color:var(--color-background-light);
}

.theme-dark .card-info-medium__content{
  background-color:var(--color-background-dark);
}

.theme-neutral .card-info-medium__content{
  background-color:var(--color-background-neutral);
}

.theme-transparent .card-info-medium__content{
  background-color:transparent;
}

.theme-accent .card-info-medium__content{
  background-color:var(--color-background-accent);
}