Skip to content
Snippets Groups Projects
hy-list-item.scss 1.65 KiB
Newer Older
  • Learn to ignore specific revisions
  • :host {
      display: block;
    }
    
    .hy-list-item {
      display: flex;
      font-family: var(--main-font-family);
      margin-bottom: 28px;
      text-decoration: none;
    
      @include breakpoint($wide) {
        margin-bottom: 32px;
      }
    
      &__info-container {
        &__header {
          @include font-size(12px, 14px);
          color: var(--grayscale-dark);
          letter-spacing: 0;
          margin-bottom: 4px;
    
          @include breakpoint($narrow) {
            @include font-size(14px, 18px);
            margin-bottom: 2px;
          }
        }
    
        &__title {
          @include font-size(18px, 22px);
          @include font-weight($bold);
          color: var(--brand-main-light);
          letter-spacing: -0.56px;
          margin-bottom: 6px;
    
          @include breakpoint($narrow) {
            @include font-size(22px, 28px);
            letter-spacing: -0.69px;
            margin-bottom: 10px;
          }
          @include breakpoint($fullhd) {
            @include font-size(26px, 32px);
            letter-spacing: -0.8px;
            margin-bottom: 8px;
          }
        }
    
        &__link-container {
          align-items: center;
          display: flex;
          margin-bottom: 6px;
    
          @include breakpoint($narrow) {
            margin-bottom: 8px;
          }
        }
    
        &__link {
          @include font-size(12px, 16px);
          color: var(--grayscale-dark);
          letter-spacing: -0.07px;
          margin-left: 4px;
    
          @include breakpoint($narrow) {
            margin-left: 5px;
          }
    
          &__icon {
            svg {
              fill: var(--grayscale-dark);
            }
          }
        }
    
        &__description {
          @include font-size(14px, 20px);
          color: var(--grayscale-black);
          letter-spacing: 0;
    
          @include breakpoint($narrow) {
            @include font-size(16px, 24px);
          }
        }
      }
    }