@layer components {
  @scope (.scope.article) to (.scope) {
    :scope {
      border-bottom: 0.5px solid var(--color-black);
      font-size: var(--font-size-400);
      line-height: 3;
      transition-duration: var(--duration-default);
      transition-property: border-color;
      transition-timing-function: var(--ease-custom);
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        border-color: var(--color-accent);
      }
    }

    ._link {
      display: grid;
      gap: calc(32 * var(--px-to-rem));
      grid-template-columns: calc(144 * var(--px-to-rem)) 1fr;
      padding-inline: calc(80 * var(--px-to-rem));
    }

    ._date {
      color: var(--color-accent);
      font-family: var(--font-futura);
      letter-spacing: 0.1em;
      opacity: 0.5;
    }

    ._title {
      font-weight: var(--font-weight-medium);
      letter-spacing: 0;
      transition-duration: var(--duration-default);
      transition-property: color;
      transition-timing-function: var(--ease-custom);
    }

    @media (hover: hover) and (pointer: fine) {
      :scope:hover ._title {
        color: var(--color-accent);
      }
    }

    @media (width <= 767px) {
      :scope {
        font-size: calc(18 * var(--px-to-rem));
        padding-bottom: calc(24 * var(--px-to-rem));
      }

      ._link {
        gap: calc(16 * var(--px-to-rem));
        grid-template-columns: 1fr;
        padding-inline: 0;
      }

      ._date {
        line-height: 1;
      }

      ._title {
        line-height: 1.4;
      }
    }
  }
}